Posts Tagged ‘form validation’

Top 10 jQuery plugins for Form Usability

Thursday, January 29th, 2009

As we’ve discussed in previous posts, form usability should be extremely high on your list of things to do to convert potential users, to actual users. A form can make or break the success of your application, so do your users a favour – make it as easy as possible to fill in. Below are 10 great jQuery plugins which can help you on your way to live validation of inputed data, and greater functionality from basic form elements.

1) AlphaNumeric

Alphanumeric

AlphaNumeric is a handy plugin which allows you to be very specific about what characters you will accept for any given form field, from numeric only, alpha only etc. You can also specify alphanumeric, but allow certain characters too, like & or % for example.

2) JTip

JTip

JTip allows you to add easy, functional tooltips to your form elements. Really good for helping your users out on the specifics!

3) Password Strength Indicator

Password Indicator

Password Strength Indicator does what it says on the tin, however my preference would be to have the colors swapped round red for bad, green for good… Down to your imagination :)

4) jQUploader

jqUploader

jQUploader makes it easy for you to handle image uploads from with your form. Once the upload is complete, it will add the location of the upload into a hidden form field for you to save.

5) Ajax Username Checker

Ajax Username Checker

Ajax Username Checker again does what it says on the tin. It’ll validate against your username records so that a user can choose a unique name straight away.

6) ASMSelect

ASM Select

ASMSelect is a great functional way to multi-select options in a dropdown field… cant beat it!

7) Geogoer VChecks

Geogoer-Vchecks

Geogoer VChecks is a very user friendly way to show checkboxes… Lovely!

8) JVal Validation

JVal

jVal Validation is another easy to implement validation plugin for all your live validation needs.

9) Default Value

Default Value Plugin

Default Value is very simple, it shows a default value for a form field, and removes it when the user focusses on that form field.

10) Validation

Validation Plugin

Validation is the mother of all validation plugins. Pretty much covers you off for everything!

Conclusion

Hope you find these helpful – feel free to add more of your favourite form jQuery plugins in the comments section…

Some books to help you learn:

Learning jQuery

Learning jQuery

JQuery In Action

JQuery In Action

jQuery Reference Guide

jQuery Reference Guide