CODEWITHSUNDEEP
javascriptjqueryhtml
Himanshu97
Himanshu97

Reputation: 541

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>
  Email:
  <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>
</div>

I have added Multiple property in input type="email", 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.

Upvotes: 1

Views: 16924

Answers (2)

Tux
Tux

Reputation: 131

  1. Do not use the pattern attribute for e-mail validation. The browsers validate an e-mail address in an e-mail input field.
  2. Himanshu97, you did not specify how you entered the e-mail addresses. Browsers expect them to be separated by comma, not just space (seems weird for me).

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>e-mail addresses</title>
</head>

<body>
    <form method="post">
        <fieldset>
            <legend>e-mail addresses</legend>
            <label>e-mail addresses
                <!-- use email type to enable browser to validate and display error messages
                also browsers can display an optimized "keyboard"
                do no use pattern, browsers have a build in pattern -->
                <input type="email" name="emailAddress" id="emailAddress" value="e@e"
                    placeholder="e@e, [email protected], [email protected]" autofocus multiple required>
            </label>
            <p>is valid: input is <span id="isValid">not</span> valid</p>
            <p>splitted input:</p>
            <ol id="splittedInput"></ol>
            <button type="submit">submit</button>
        </fieldset>
    </form>
    <script>
        const MAIL_INPUT = document.getElementById('emailAddress');
        const IS_VALID = document.getElementById('isValid');
        const SPLITTED_INPUT = document.getElementById('splittedInput');
        MAIL_INPUT.oninput = (input) => {
            IS_VALID.innerText = input.srcElement.validity.valid ? '' : 'not';
            const SPLITTED = input.srcElement.value.split(',');
            let addresses = [];
            let list = [];
            for (const SPLIT of SPLITTED)
                addresses.push(SPLIT.trim());
            for (const ADDRESS of addresses.sort())
                list.push(newListElement(ADDRESS));
            SPLITTED_INPUT.replaceChildren(...list);
        }
        function newListElement(content) {
            let li = document.createElement('li');
            li.innerText = content + ' — ' + (validEmailAddress(content) ? 'valid' : 'invalid');
            return li;
        }
        function validEmailAddress(emailaddress) {
            // this regex does not validate correctly. Try abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopq@a.aa (invalid)
            return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailaddress);
        }
    </script>
</body>

</html>

Upvotes: 0

sandipshirsale
sandipshirsale

Reputation: 791

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

<html>
<head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
  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.");


 $("#emailFrm").validate({
    errorElement:'div',
    rules: {
        emails: {
            required: true,
            multiemail:true
        }
    },
    messages: 
    {
        emails: {
            required:"Please enter email address."
        }
    }
 });
});
</script>
</head>
<body>
<form method="post" id="emailFrm">
<input type="text"  name="emails"  />
<input type="submit" name="submit" value="submit">
</form>
</body>

demo click here

Upvotes: 3

Related Questions