2+ (multiple) emails in jQuery Validated text input

Steve Ontologic picture Steve Ontologic · Jul 29, 2013 · Viewed 9k times · Source

I've been working on this for a few hours now and can't seem to make it work. I need more than one email in our clients section, in the same input field.

Right now I have (which works great for one email):

<script language="JavaScript">
$(document).ready(function(){
    $("form#editclient").validate({
            rules: {
            Contact: {
                required: true
            },
            Clientname: {
                required: true
            },
            ClientLogin: {
                required: true
            },
            ClientPassword: {
                required: true
            },
            email: {
                required: true,
                multiemail: true
            }
        },
        messages: {
            Contact: {
                required: "Please enter your Contact Nmae."
            },
            Clientname: {
                required: "Please enter your Client Name"
            },
            ClientLogin: {
                required: "Please enter a login."
            },
            ClientPassword: {
                required: "Please enter a password"
            },
            email: {
                required: "Please enter an Email Address",
                multiemail: "You must enter a valid email, or comma separate multiple"
            }
        }
});
});
</script>
    <input type="Text" id="email" name="Email" value="#Trim(Email)#" maxlength="60" class="inputText430 email required">

I had found this which is supposed to get the multiple validator working:

jQuery.validator.addMethod(
"multiemails",

function (value, element) {
    if (this.optional(element)) // return true on optional element
    return true;
    var email = value.split(/[;,]+/); // split element by , and ;
    valid = true;
    for (var i in email) {
        value = email[i];
        valid = valid && jQuery.validator.methods.email.call(this, $.trim(value), element);
    }
    return valid;
},

jQuery.validator.messages.multiemail);

But I can't get it to work properly. Can someone please help me get the ability to validate 2 or more emails in one text field?

Thanks in advance.

(edited to add multiemail in rules and messages) (edited with solution below) SOLUTION

<form>
    <input id='emailTest' name='emailTest' />
    <input type='submit' />
</form>
    <script type="text/javascript">
    jQuery.validator.addMethod(
    "multiemail",
    function (value, element) {
        var email = value.split(/[;,]+/); // split element by , and ;
        valid = true;
        for (var i in email) {
            value = email[i];
            valid = valid && jQuery.validator.methods.email.call(this, $.trim(value), element);
        }
        return valid;
    },
    jQuery.validator.messages.multiemail
);

$("form").validate({
    debug: true,
    rules: {
            emailTest: {
                multiemail: true
            }
        },
    messages: {
            emailTest: {
                multiemail: "You must enter a valid email, or comma separate multiple"
            }
        },
    submitHandler: function(form) {
            return false;
        }
});

Answer

Jonas Bergler picture Jonas Bergler · Jul 30, 2013

I think there are some semantic errors in the code which lead to some things happening you aren't expecting.

I have managed to get your custom handler to work by mapping it to a field by name rather than by type - I'm not sure the override works in the plugin.

rules: {
    emailTest: {
        multiemail: true
    }
}

Also in the handler, you had multiemails as the identifier and referred to it as multiemail later on, not sure how much of an impact that had.

Here's the full working example: http://jsfiddle.net/jbergler/7jXn7/2/