Form validator plugin

Submitted by Diego on Wed, 10/21/2009 - 11:29

Writing jQuery plugins is pretty cool, and fun! Here's my second addition to my plugin repertoire, formBouncer. With just one call to formBouncer, any or all of your forms will be automatically validated before submission (where you will hopefully also run server-side validation).

All that's really needed is to add the appropriate classes to your inputs to declare what sort of validation they are subject to. The currently supported validation routines are: required, email, numeric, and confirm (password). The former three check if the input's value is present, looks like an email, or is a number. The latter routine matches the input's value with another input with a type of password.

I'll be adding the ability to define custom options, as well as more fine-grained validation routines, and ways of displaying the error message. As is, the error messages get prepended to the form and slid open.

Usage:

As always, include jquery...

<script type="text/javascript" src="jquery.js"></script>
// don't forget the plugin!
<script type="text/javascript" src="jquery.formbouncer.js"></script>

Then, all you have to do is this...

jQuery(function(){
jQuery('form').formBouncer();
});

Used together with my previous plugin hinty should provide a snap on improvement to user experience when filling out forms on your site. Until HTML5 is standard of course.

Please send me any comments or suggestions! Also check out the project page on jQuery's plugins page and give it a good rating!

You can check out my plugins on or download this plugin directly.