A jQuery plugin to add notes below textareas and input fields based on regex patterns.
Demo Usage Styling Download Compatibility Changelog More Examples
Type something. As soon as you type a number, a note will be added below the textarea. If you type "sex", a warning will be shown.
The patterns are normal JavaScript regex patterns and you are free to create and style any type of notes and note texts as you want. Note texts can contain HTML, no problem.
This is how you use it:
$(document).ready(function(){
$("#message").inputNotes(
{
sexwarning: {
pattern: /(^|\s)sex(\s|$)/ig,
type: 'warning',
text: 'Do not type "sex"!'
},
numbersnote: {
pattern: /[0-9]/,
type: 'note',
text: 'Do not type numbers!'
}
}
);
});
If you need to know if there are any notes attached to an element, for example to decide if a form should be submitted or not, here's how:
if ( $("#message").hasInputNotes() ){
// don't send form
}
Test: Textarea has notes?
You can test for certain note types, too:
if ( $("#message").hasInputNotes('warning') ){
// don't send form
}
Test: Textarea has warning notes?
And even for whole forms:
if ( $("#testform").hasInputNotes('warning') ){
// don't send form
}
Test: Form has warning notes?
If you instantly need to know if a note was added or removed, there are events for that, the inputnote_added and inputnote_removed events:
$("#textfield").inputNotes(
{
spacewarning: {
pattern: /\s/,
type: 'warning',
text: 'Do not type spaces!'
}
}
).bind('inputnote_added',function(e,data){
alert("Note '"+data.note+"' added!");
}).bind('inputnote_removed',function(e,data){
alert("Note '"+data.note+"' removed!");
});
Additionaly there's the possibility to add callbacks inside the settings hashtable to achieve the same:
$("#textfield").inputNotes(
{
spacewarning: {
pattern: /\s/,
type: 'warning',
text: 'Do not type spaces!',
addCallback: logAddNote,
removeCallback: logRemoveNote
}
}
);
The callback functions have access to the DOM element (this) and can get the note identifier (item) and note type (type):
function logAddNote(item,type){
alert("Log: '"+item+"' '"+type+"' for '#"+this.attr('id')+"' added!");
}
function logRemoveNote(item,type){
alert("Log: '"+item+"' '"+type+"' for '#"+this.attr('id')+"' removed!");
}
You can now add notes with an inversed behavior (adding a note when the pattern isn't matched). In the case below, we use the same pattern, once to ask for numbers only and than to thank the user for following the rule. Additionaly the note is now displayed on top of the input field with the "notePosition" option.
$("#example6").inputNotes(
{
config: {
notePosition: 'before'
},
warning: {
pattern: /^[0-9]+$/,
type: 'note',
text: 'Only numbers, please ...',
inversedBehavior: true
},
thanks: {
pattern: /^[0-9]+$/,
type: 'info',
text: 'Thx, that\'s how I like it.',
inversedBehavior: false
}
}
);
And if you don't want the notes inside div tags, you can chose your own HTML tags like in the following example were we use an unordered list (ul) for the container and list items (li) for the notes:
$("#example7").inputNotes(
{
config: {
containerTag: 'ul',
noteTag: 'li'
},
numbers: {
pattern: /[0-9]/,
type: 'note',
text: 'Numbers, I like numbers.'
},
alphas: {
pattern: /[A-Z]/i,
type: 'note',
text: 'Oh nice, alphas!'
}
}
);
This is how you add css styles:
div.inputnotes div {
padding: 3px;
padding-left: 4px;
padding-top: 4px;
margin-top: 2px;
}
div.inputnotes div.note {
color: #fff;
background: #333;
}
div.inputnotes div.warning {
color: #fff;
background: #f03;
}
Each note has a class with the same name as the type of the note, so you are free to create any kind of notes, you don't have to name them note, warning ... just use a name that can be used as a CSS class and everything is fine.
Current version: jquery.inputnotes-0.6.js (3.3k not minified)
Tested in:
There really is nothing complicated in there, so expect the plugin to work in older browsers as well.
Enter a valid email address.
$("#example1").inputNotes(
{
email: {
pattern: /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+$/,
type: 'info',
text: 'Yes, that\'s a valid email address!'
}
}
);
Enter something. If you enter just whitespace, it will still count as empty.
$("#example2").inputNotes(
{
requiredfield: {
pattern: /(^(\s)+$)|(^$)/,
type: 'warning',
text: 'This field is required!'
}
}
);
Enter some text with bad words to get a warning.
$("#example3").inputNotes(
{
badwords: {
pattern: /(^|\s)(fuck|cunt|ass|nigger|twat)(\s|$)/ig,
type: 'warning',
text: 'We are a friendly place, don\'t use bad words!'
}
}
);
Helps you choose a good password.
$("#example4").inputNotes(
{
minlength: {
pattern: /^(.){0,5}$/i,
type: 'info',
text: 'Minimum password length is 6 characters.'
},
characters: {
pattern: /[^a-z0-9]/i,
type: 'warning',
text: 'Please only alphanumeric characters.'
},
alphaandnum: {
pattern: /(^[a-z]+$)|(^[0-9]+$)/i,
type: 'warning',
text: 'Please use both, letters and numbers.'
},
bigandsmall: {
pattern: /(^[a-z0-9]{2,}$)|(^[A-Z0-9]{2,}$)/,
type: 'warning',
text: 'Please use both, small and capitalized letters.'
}
}
);
Don't enter HTML tags or you get a warning.
$("#example5").inputNotes(
{
tags: {
pattern: /<(\S+).*>(.*)<\/\1>/,
type: 'warning',
text: 'Do not use any HTML, it will be filtered out!'
}
}
);