Validate multiple email addresses in single input text example

Leave a Comment / php / By

Validate multiple email addresses in single input text example

In this post we will give you information about Validate multiple email addresses in single input text example. Hear we will give you detail about Validate multiple email addresses in single input text exampleAnd how to use it also give you demo for it if it is necessary.

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.

  1. <inputtype="email"name="recipient_email"id="recipient_email"class="form-control">
<input type="email" name="recipient_email" id="recipient_email" >


Script for multiple input

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. 

  1. <script>
  2.     functionvalidateEmail(email){
  3. var re =/^([w-]+(?:.[w-]+)*)@((?:[w-]+.)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$/i;
  4. return re.test(email);
  5. }
  6. (function( $ ){
  7.      $.fn.multipleInput =function(){
  8. returnthis.each(function(){
  9. // list of email addresses as unordered list
  10.                $list = $('<ul/>');
  11. // input
  12. var $input = $('<input type="email" id="email_search" />').keyup(function(event){
  13. if(event.which ==13|| event.which ==32|| event.which ==188){
  14. if(event.which==188){
  15. var val = $(this).val().slice(,-1);// remove space/comma from value
  16. }
  17. else{
  18. var val = $(this).val();// key press is space or comma                        
  19. }
  20. if(validateEmail(val)){
  21. // append to list of emails with remove button
  22.                          $list.append($('<li ><span>'+ val +'</span></li>')
  23. .append($('<a href="#"  title="Remove"><i ></i></a>')
  24. .click(function(e){
  25.                                         $(this).parent().remove();
  26.                                         e.preventDefault();
  27. })
  28. )
  29. );
  30.                          $(this).attr('placeholder','');
  31. // empty input
  32.                          $(this).val('');
  33. }
  34. else{
  35. alert('Please enter valid email id, Thanks!');
  36. }
  37. }
  38. });
  39. // container div
  40. var $container = $('<div  />').click(function(){
  41.                     $input.focus();
  42. });
  43. // insert elements into DOM
  44.                $container.append($list).append($input).insertAfter($(this));
  45. return $(this).hide();
  46. });
  47. };
  48. })( jQuery );
  49. $('#recipient_email').multipleInput();
  50. </script>
<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" />').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 ><span>' + val + '</span></li>')
                              .append($('<a href="#"  title="Remove"><i ></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  />').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 

  1. <style>
  2. /*multi email input*/
  3. .multipleInput-container {
  4. border:1px#cccsolid;
  5. padding:1px;
  6. padding-bottom:;
  7. cursor:text;
  8. font-size:13px;
  9. width:100%;
  10. height:75px;
  11. overflow:auto;
  12. background-color:white;
  13. border-radius:3px;
  14. }
  16. .multipleInput-container input {
  17. font-size:13px;
  18. /*clear:both;*/
  19. width:150px;
  20. height:24px;
  21. border:;
  22. margin-bottom:1px;
  23. outline:none
  24. }
  26. .multipleInput-container ul {
  27. list-style-type:none;
  28. padding-left:0px !important;
  29. }
  31. li.multipleInput-email {
  32. float:left;
  33. margin-right:2px;
  34. margin-bottom:1px;
  35. border:1px#BBD8FBsolid;
  36. padding:2px;
  37. background:#F3F7FD;
  38. }
  40. .multipleInput-close {
  41. width:16px;
  42. height:16px;
  43. background:url(close.png);
  44. display:block;
  45. float:right;
  46. margin:3px;
  47. }
  48. .email_search{
  49. width:100% !important;
  50. }
  51. </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 (,).

Show Demo

Label :

HTML

jQuery

How To

JavaScript

Hope this code and post will helped you for implement Validate multiple email addresses in single input text example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  83  =  86

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US