Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to validate coma seperated emails using Javascript

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 495
    Comment on it

    Hello Reader's, If you are developing the form for multiple email address as input, then you need to validate each email individually. You can do it by validating on submit or after submit. By using the Jquery script you can do it on user end, It will run fast and hold the form to submit. Lets see my code as below:-

    First in my html page I created a text box where user type the multiple email addresses.

    <div class="form-group row">
    <label class="col-md-1 col-xs-12 title">To:</label>
    <div class="col-md-11 col-xs-12">
    <textarea required class="form-control" name="to[]" onkeypress="addemail()" id = "emailvalidation" style="width:100%"></textarea>  
    <ul class="ui-for-email" id="class_list" tabindex="0" style="display: none; top: 21px; left: 235.6875px; width: 171px;  z-index: 4;" >
    </ul>    
        <?php foreach ($MyContacts as $val) { 
      $frendemails[] = $val['email']; }?>
    
    </div>
    </div><center><span id="values" class = "error" ></span></center> 
    

    In above code my text box makes the auto suggest to user's saved emails also. You can see it, they are generating inside the php tags. You can remove them if you don't want.

    Now it comes the validation part of this text box. It code is like below:-

    <script type="text/javascript">
    function validateEmail()
    {
        $('#createForm').bind('submit');
        var error = 0;
        longEmail = $('#emailvalidation').val();
        //console.log(longEmail);
        var values = longEmail.split(",");
        console.log(values);
        var regexEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;    
        for (i = 0; i < values.length; i++) {
            if (regexEmail.test(values[i]) == false) {
                $("#values").text(values[i] + ' is an invalid email');
                alert(values[i] + 'is an invalid email');
                $("#createForm").submit(function(e) {
                    e.preventDefault();
                });
                error = 1;
            }
        }
    </script>
    

    Now every time user press the key in the text box the function onkeypress="addemail()" is called. In the Jquery validation code I explode the string into comma separated form. In the line (i = 0; i < values.length; i++) it getting the each key value of the array and matching again the email validation regex. If any key if found to incorrect it will call the function e.preventDefault(). This will block the form to get submit. Now you just have to make an error in any span print the invalid key value in it. Like below

    <center><span id="values" class = "error" ></span></center> 
    

    Output:- alt text

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: