Multi Input Component With Value Validation - jQuery Taglist
File Size: | 7.08 KB |
---|---|
Views Total: | 3100 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.