How to Validate Multiple Emails with JQuery separate by comma

Question

Now Im doing PHP code combine with JQuery. Im not experiance with Jquery. now i want to do real time validate insert multiple email. the insert is separate by comma (,).. here what im doing

$(function() {
    $('.validateEmails').on('input', function() {
        var emails = $(this).val();

        emails = emails.replace(/^\s+|\s+$/g, "");

        if (emails.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i)) {
            console.log("email match");
        } else {
            console.log("email not match");
        }
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label >Emails: </label>
  <input type="text" class="validateEmails" name="emails" size="50">
  <Br>
  <span> <small>*Please add (,) comma for send multiple email </small></span>

my code just only handle single email not multiple email. how do i still able to validate multiple email separate by comma(,).

Ex. "halo@email.com" -> this will return "email match"

but how if i input "halo@email.com, test@email.com". this still can return "email match"

please help

You should [learn how to use the label element properly](http://www.456bereastreet.com/archive/200711/use_the_label_element_to_make_your_html_forms_accessible/). Without a for attribute or a form control inside it, a label is useless. — Quentin, Oct 09 '20 at 12:08

score 0 · Answer 1 · answered Oct 09 '20 at 12:07

0

split the string on commas, then validate each address in turn.

… but find a better regular expression than the one you have as it will give false negatives.

answered Oct 09 '20 at 12:07

Quentin

914,110
126
1,211
1,335

score 0 · Answer 2 · answered Oct 09 '20 at 12:16

You don't need a regex to get each email, use split().

The regex you've used to validate the emails isn't that extensive, take a look at How to validate an email address in JavaScript for a more in-depth regex.

The following code should give you an idea n how to use it;

$(function() {
    $('.validateEmails').on('input', function() {
    
        // Get input value
        var emails = $(this).val();

        // Split on ','
        var emaillist = emails.split(',');
          
        // For-each email
        emaillist.forEach((e) => {
            
            // Validate
            if (validateEmail(e)) {
                console.log("email match", e);
            } else {
                console.log("email not match", e);
            }
        }); 
    });
});

function validateEmail(email) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label >Emails: </label>
  <input type="text" class="validateEmails" name="emails" size="50">
  <Br>
  <span> <small>*Please add (,) comma for send multiple email </small></span>

How to Validate Multiple Emails with JQuery separate by comma

2 Answers2