Himanshu97 Himanshu97 - 1 month ago 7x
HTML Question

How to add multiple Email addresses in text input HTML

In HTML5 in Used this code, i want user to be able to add multiple email address in input box...

<div class="modal-body row-fluid" align="left">
<span class="loader-gif" style="display:none;"><img src="<?php echo $baseURL?>/watever/img/ajax-loader-horizontal.gif"></span>
<input type="email" multiple="multiple" autofocus="" pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$" style="display:none;width:91%;cursor:text;" />Links:
<input type="text" readonly="readonly" style="display:none;width:91%;cursor:text;" />
<span class="message" style="display:none;"></span>

I have added Multiple property in input
, still i am not able to add more than one email address in my browser,

i am using, firefox latest version for testing. I just want to know, what is the way, to allow user to add multiple email addresses in that input box?
and how to later retrieve those values using Javascript.


try this, include the jquery and validate js file as per your file location

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script>
  jQuery.validator.addMethod("multiemail", function (value, element) {
        if (this.optional(element)) {
            return true;
        var emails = value.split(','),
            valid = true;
        for (var i = 0, limit = emails.length; i < limit; i++) {
            value = emails[i];
            valid = valid && jQuery.validator.methods.email.call(this, value, element);
        return valid;
    }, "Please separate email addresses with a comma and do not use spaces.");

    rules: {
        emails: {
            required: true,
        emails: {
            required:"Please enter email address."
<form method="post" id="emailFrm">
<input type="text"  name="emails"  />
<input type="submit" name="submit" value="submit">

demo click here