jQuery Plugins by Fredi Bach: InputNotes, AutoAnchors, RandomClass, RemoveOverflow, aPartHide, TabSelect, DefaultsTagger, SelectSwitcher, LivingFade, SlideInReplace, WaveAnimate, jKit (external)

InputNotes jQuery Plugin

A jQuery plugin to add notes below textareas and input fields based on regex patterns.

Demo Usage Styling Download Compatibility Changelog More Examples

Demo

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.

You can use it for everything that has values, so for example a text inputfield will do it as well, here an example where we test for spaces:

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.

Usage

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!");
}

New since version 0.6:

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!'
    }
  }
);

Styling

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.

Download

Current version: jquery.inputnotes-0.6.js (3.3k not minified)

Compatibility

Tested in:

With:

There really is nothing complicated in there, so expect the plugin to work in older browsers as well.

Changelog

More Examples

Email check:

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!' 
    }
  }
);
    

Truly required field:

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!' 
    }
  }
);
    

Bad Words:

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!' 
    }
  }
);

Password strength:

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.' 
    }
  }
);

HTML Tags:

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!' 
    }
  }
);