jQuery Multiple Email Address Validation in one text box

Today, We want to share with you jQuery Multiple Email Address Validation in one text box with comma.In this post we will show you Validate multiple email addresses in single input text example, hear for Email address validation in jQuery using Regular Expressions we will give you demo and example for implement.In this post, we will learn about How to validate multiple email addresses entered into a textbox. Using Java Script or JQuery? with an example.

jQuery Multiple Email Address Validation in one text box with comma

There are the Following The simple About jQuery Multiple Email Address Validation in one text box with comma Full Information With Example and source code.

Also Read :  Laravel 5.7 Toggle switch Update DB field using Ajax

As I will cover this Post with live Working example to develop jQuery validation plugin multiple email addresses, so the Validate multiple emails with JavaScript for this example is following below.

Example 1: Email address validation in jQuery using Regular Expressions

Step 1: include jQuery validate file and Javascript files from CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

Step 2: HTML Form index.html File

<div class="form-group">
    <label for="email" class="col-lg-2 control-label">Email: </label>
    <div class="col-lg-10">
        <input class="form-control" type="text" id="email" name="email" autocomplete="off" placeholder="Enter Your Email">
    </div>
</div>

Step 3: javascript/jQuery Source code

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


$("#form").validate({
    rules: {
        email : {
            required: true,
            multipleemailaddress: true
        }
    },
    messages: {
        email: {
            required: "Enter Your email.",
            multipleemailaddress: "You must enter a valid e-mail address."
        }
    },
    submitHandler: function(form) {
         $("#loading").show();
    }
});

Example 2: Validate multiple email id’s using jQuery

Step 1: HTML Form index.html File

<form id="form" method="post">
List Of Your Friends Email Address :<input type="text" name="emails" id="emails" class="emails"><br />
<input type="submit" value="Virat Kohali">
</form>

Step 2: javascript/jQuery Source code

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

   jQuery.validator.messages.multipleemailaddress
);

$("#form").validate({
    rules: {
        emails: { required: true, multipleemailaddress: true }
    },
    messages: {
        emails: {
                required: "Please Enter Your Valid email.",
                multipleemailaddress: "You must enter a valid e-mail address.."
            }
        }
});

Demo : jQuery validation plugin multiple email addresses

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read :  ASP.NET Page life cycle with Events

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jQuery Multiple Email Address Validation in one text box with comma.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Gondaliya Jaydeep

Hi, I’m Jaydeep Gondaliya, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]