2+ (multiple) emails in jQuery Validated text input

Question

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;
        }
});

How does it not work correctly? Do you get an error message, does the function not get called? i suspect an error as you have `jQuery.validator.messages.multiemails` as a paramater in the addMethod function but i do not see a definition for it in your code, so you are probably getting a undefined variable error. — Patrick Evans, Jul 29 '13 at 15:27
No errors pop up in console, and the validation of the the email field works like normal, as in will only recognize 1 email as valid. — Steve Ontologic, Jul 29 '13 at 15:55

score 12 · Accepted Answer · answered Jul 29 '13 at 23:02

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/

Thank you very much! Once I had the working example, I could see what was going wrong. Your very direct help is greatly appreciated. Will update above with solution. — Steve Ontologic, Jul 30 '13 at 16:28

2+ (multiple) emails in jQuery Validated text input

1 Answers1