Multi Input Component With Value Validation - jQuery Taglist

Taglist is a jQuery multi input (also known as tags input) plugin that allows you to insert multiple values (separated by Space) as tags into a text field.

Comes with a tagValidator option that allows you to validate values using Regex. Well-suited for multi email/phone number input.

How to use it:

1. Insert the jQuery Taglist plugin's files into the document.

<link rel="stylesheet" href="/path/to/css/taglist.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/taglist.jquery.js"></script>

2. Generate a basic multi input component inside a container you specify.

<div id="example"></div>

$('#example' ).tagList('create', {
  // options here
});

3. Apply a custom validator to the multi input component.

$('#example' ).tagList('create', {
  tagValidator : function( emailid ) {
    // email address
    var emailPat = /^[A-Za-z]+[A-Za-z0-9._]*@[A-Za-z0-9]+\.[A-Za-z.]*[A-Za-z]+$/;
    return emailPat.test( $.trim( emailid ) );
  }
});

$('#example' ).tagList('create', {
  tagValidator : function( mobileNumber ) {
    // phone number
    var mobileNumberPat = /^[1-9]{1}[0-9]{9}$/;
    return mobileNumberPat.test( $.trim( mobileNumber ) );
  }
});

4. Get the current tag list using the tagadd event.

$( '#example' ).on( 'tagadd', function( $event, tagText, opStatus, message ) {
  if( opStatus === 'success' ) {
    console.log( 'Email \'' + tagText + '\' added' );
  } else if( opStatus === 'failure' ) {
    alert( 'Email \'' + tagText + '\' could not be added [' + message + ']' );
  }
});

5. Trigger a function after a tag has been removed.

$( '#example' ).on( 'tagremove', function( $event, tagText ) {
  console.log( 'Tag \'' + tagText + '\' removed' ); 
});

---

This awesome jQuery plugin is developed by puranik3. For more Advanced Usages, please check the demo page or visit the official website.