Bubble Input


Simple input content tokenizer and validator for input fields and textareas. Bubble input is free to use in any applications and comes under MIT license. It is cross-browser compatible and was tested in IE7+, FF, Chrome, Opera and Safari.

Mails (comma separated, email validation):

Names (semicolon separated, name validation, with autocompletion):

Phones (space separated, number validation):


Known Issues


Latest version (with examples): bubble_input_v1.0.zip

Or on github: bubble input

Code example (for what you see above)

<input id="mails" value="test02@test.com, not a mail" />
<textarea id="names">misha; Tobias; Not11Name</textarea>
<textarea id="phones">98989 342224224 2242222224 not98number</textarea>

var bi1 = new BubbleInput();
bi1.generate( { targetSelector:  "#mails",
                separatorRegex:  new RegExp(/,\s*|\r\n|\r|\n/),
                separatorString: ", ",
validationRegex: new RegExp(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/)  } );
jQuery("#mails-export").click( function(){
  alert( bi1.exportBubbles() );
} );
var bi2 = new BubbleInput();
bi2.generate( { targetSelector: "#names",
                separatorRegex:  new RegExp(/;\s*|\r\n|\r|\n/),
                separatorString: "; ",
                validationRegex: new RegExp(/^[^\d]+$/)  } );

jQuery("#names-export").click( function(){
  alert( bi2.exportBubbles() );
} );
var availableTags = [
jQuery( jQuery('#names').next('.bubble-input').find('.bubble-new .edit') ).autocomplete({
  source: availableTags,
  position: { of: jQuery('#names').next('.bubble-input') }
var bi3 = new BubbleInput();
bi3.generate( { targetSelector: "#phones",
                separatorRegex:  new RegExp(/\s\s*|\r\n|\r|\n/),
                separatorString: " ",
                validationRegex: new RegExp(/^\d+$/)  } );

jQuery("#phones-export").click( function(){
  alert( bi3.exportBubbles() );
} );


Michail Mazo


Other stuff

This wonderful template comes from Soh Tanaka