Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

2+ (multiple) emails in jQuery Validated text input

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;
        }
});
like image 699
Steve Ontologic Avatar asked Jul 29 '13 15:07

Steve Ontologic


People also ask

How do I verify multiple email addresses?

You just parse the string into an array of string, each with a single email address. Split the string on your delimiter, get the array of string back and then enumerate the array, sending each email address to your code that validates the address.

What is validator addMethod in jQuery?

validator. addMethod( name, method [, message ] ) Description: Add a custom validation method. It must consist of a name (must be a legal javascript identifier), a javascript based function and a default string message.

Is valid jQuery validate?

valid() from the jQuery Validation plugin: $("#form_id"). valid(); Checks whether the selected form is valid or whether all selected elements are valid.


1 Answers

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/

like image 109
Jonas Bergler Avatar answered Sep 29 '22 18:09

Jonas Bergler