Add multiple email addresses in single input text field is useful when you are going to send bulk email at one action, you don't need to add multiple input email field for sending bulk email.
Simple add a input text filed for validate multi input email field.
- <input type="email" name="recipient_email" id="recipient_email" class="form-control">
Here i add a function to validate email field using JavaScript regex function to confirm if input value is valid email then it will allow you to enter for second email in input text field otherwise it will fire alert message, it validates when you type your email id or something else and press enter, space or type comma (,) sign if validation goes successfully then you can enter more emails within single input text field.
- <script>
- function validateEmail(email) {
- var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
- return re.test(email);
- }
- (function( $ ){
- $.fn.multipleInput = function() {
- return this.each(function() {
- // list of email addresses as unordered list
- $list = $('<ul/>');
- // input
- var $input = $('<input type="email" id="email_search" class="email_search multiemail"/>').keyup(function(event) {
- if(event.which == 13 || event.which == 32 || event.which == 188) {
- if(event.which==188){
- var val = $(this).val().slice(0, -1);// remove space/comma from value
- }
- else{
- var val = $(this).val(); // key press is space or comma
- }
- if(validateEmail(val)){
- // append to list of emails with remove button
- $list.append($('<li class="multipleInput-email"><span>' + val + '</span></li>')
- .append($('<a href="#" class="multipleInput-close" title="Remove"><i class="glyphicon glyphicon-remove-sign"></i></a>')
- .click(function(e) {
- $(this).parent().remove();
- e.preventDefault();
- })
- )
- );
- $(this).attr('placeholder', '');
- // empty input
- $(this).val('');
- }
- else{
- alert('Please enter valid email id, Thanks!');
- }
- }
- });
- // container div
- var $container = $('<div class="multipleInput-container" />').click(function() {
- $input.focus();
- });
- // insert elements into DOM
- $container.append($list).append($input).insertAfter($(this));
- return $(this).hide();
- });
- };
- })( jQuery );
- $('#recipient_email').multipleInput();
- </script>
You can add style over input text field.
Add Style
- <style>
- /*multi email input*/
- .multipleInput-container {
- border:1px #ccc solid;
- padding:1px;
- padding-bottom:0;
- cursor:text;
- font-size:13px;
- width:100%;
- height: 75px;
- overflow: auto;
- background-color: white;
- border-radius:3px;
- }
- .multipleInput-container input {
- font-size:13px;
- /*clear:both;*/
- width:150px;
- height:24px;
- border:0;
- margin-bottom:1px;
- outline: none
- }
- .multipleInput-container ul {
- list-style-type:none;
- padding-left: 0px !important;
- }
- li.multipleInput-email {
- float:left;
- margin-right:2px;
- margin-bottom:1px;
- border:1px #BBD8FB solid;
- padding:2px;
- background:#F3F7FD;
- }
- .multipleInput-close {
- width:16px;
- height:16px;
- background:url(close.png);
- display:block;
- float:right;
- margin:0 3px;
- }
- .email_search{
- width: 100% !important;
- }
- </style>
You can validate on any key code, in this example i have validated emails on enter, space and comma (,).
