Wednesday, January 30th, 2008

jQuery Validation Plugin v1.2 Updated

Category: Ajax, jQuery

<p>Jörn Zaefferer went absolutely feature crazy when he decided to update his jQuery Validation plugin. Update is putting it mildly with “overhaul” coming immediately to mind.

Here are some of the cool new features added in:

  • AJAX-captcha validation example (based on http://psyrens.com/captcha/)
  • Support for “remote” ajax-validation. In other words: Remote validation is now possible and very easy to use.
  • Added highlight and unhighlight options, by default toggles errorClass on element, allows custom highlighting
  • Added valid() plugin method for easy programmatic checking of forms and fields without the need to use the validator API
  • Added rules() plguin method to read and write rules for an element (currently read only)
  • Replaced regex for email method, thanks to the contribution by Scott Gonzalez, see http://projects.scottsplayground.com/email_address_validation/
  • Restructured event architecture to rely solely on delegation, both improving performance, and ease-of-use for the developer (requires jquery.delegate.js)
  • Added feature to merge min + max into and range and minlength + maxlength into rangelength
  • Added support for dynamic rule parameters, allowing to specify a function as a parameter eg. for minlength, called when validating the element
  • Allow to specify null or an empty string as a message to display nothing
  • Rules overhaul: Now supports combination of rules-option, metadata, classes (new) and attributes (new), see rules() for details
  • Added remember-the-milk-demo (thanks RTM team for the permission!)
  • Added marketo-demo (thanks Glen Lipka!)

One of the best features of this release is the remote validation via Ajax. This is extremely easy to implement with the code being as simple as this:

[language][/language]

If you enter an email address, the validation plugin sends a request to the server with a parameter “email” and the value you entered. The server-side code can do it’s magic and send back the appropriate response based on the user input.

Adding client-side validation to a form can significantly improve the usability of that form, making it much easier for users to fill them out successfully. But pure client-side validation has severe limits where necessary information is available only on the server. Ajax helps to bridge the gap, but synchronizing validation on form submit isn’t exactly an easy task. The validation plugin makes it as simple as pure client-side validation. All you need to do is to specify a rule “remote” for a field and provide a parameter that points to a server-side resource that handles the validation.

To see the plugin in action, Jörn has created some demos using styling from Marketo.com and Remember the Milk. You can see some screenshots below.

Related Content:

Posted by Rey Bango at 6:00 am
6 Comments

++++-
4.1 rating from 75 votes

6 Comments »

Comments feed TrackBack URI

this is a great plugin. i’ve been using earlier versions for several months. but this release is really great!

Comment by Jacob — January 30, 2008

Awesome :-D … I love this plugin, it is a must have for anyone doing any serious validation with jQuery.

Comment by Tr0y — January 30, 2008

Jörn is a freaking champ – he’s the best plugin developer in my book. Go form validation plugin go!

Comment by Marc — January 30, 2008

I’m not a jQuery user but there are some really nice interactions in some of this stuff, really well executed.

One I just don’t quite get though is the Ajax ‘captcha’ (http://jquery.bassistance.de/validate/demo/captcha/index.php). At first I though Wow, that’s great I can build captach in to any page easily. But then I realised that the process must be repeated on form/page submit anyway in cases where JavaScript is turned off. So perhaps it’s not as useful as I first though for real spam protection – or have I missed something?

Comment by bugrain — January 30, 2008

@bugrain: The captcha validation, just as every other client-side validation, is just helping the user to successfully fill out the form. If he knows that the captcha is correct before submitting the form to the server, he doesn’t have to deal with a postback and maybe reenter the password.

Never use it client-side validation as a replacement for serverside validation. That’s a completely different story. Of course the goal is to write validation rules once and run them on both sides, once for helping the user, once to keep gargabe out.

Comment by Jörn Zaefferer — January 31, 2008

@Jörn

Thanks for the response. I quite agree and having thought about it I realise it is more than just a gimmick/demo.

As an example, I was thinking in terms of a captcha ad-on I know of for a CMS that – to prevent core code hacking – adds an intermediate page with the captach image on it, this is quite frustrating. Now, with an Ajax solution like yours this can, as you say, provide the user with a more pleasing result. And the backend check can be left in (with dummy pages, etc. if needed) to stop the nasty bots from spamming.

Now, back to writing the Ajax solution… ;)

Comment by bugrain — January 31, 2008

Leave a comment

You must be logged in to post a comment.