Bubble Input

About

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):

Features

Known Issues

Download

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 = [
      "Aaron",
      "Boris",
      "Cindirella",
      "Dorian",
      "Eragon",
      "Fritz",
      "Gloria",
      "Harald"
    ];
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() );
} );

Contact

Michail Mazo

michail.mazo@inovex.de

Other stuff

This wonderful template comes from Soh Tanaka