What JavaScript library to use for client-side form checking?

Question

Over the years, I've dabbled in plain JavaScript a little, but have not yet used any JavaScript/AJAX libraries. For some new stuff I'm working on, I would like to use a js library to do client-side form validation, and want to know which would be best for that. By best, my criteria would be: quick and easy to learn, small footprint, compatible with all popular browsers.

Edit: Thanks for the ASP suggestions, but they're not relevant to me. Sorry I didn't originally mention it, but the server is a Linux box running Apache and PHP. As I know I should, I plan to do server side validation of the input, but want the client side validation to improve the users' experience and to avoid as much as possible having the server reject invalid inputs.

Edit 2: Sorry I didn't reply for months! Other priorities came up and diverted me from this. I ended up doing my own validation routines - in addition to the good points made in some of the answers, some of the items I'm validating are rarely used in other applications and I couldn't find a library with that sort of validation included.

Answer 1

You could use jQuery and it's Validation plugin.

Answer 2

I don't use libraries myself, but dived into some (like prototype, (yui-)ext, the seemingly omnipresent jquery, mootools) to learn from them and extract some of the functions or patterns they offer. The libraries (aka 'frameworks') contain a lot of functionallity I never need, so I wrote my own subset of functions. Form checking is pretty difficult to standardize (except perhaps for things like phone numbers or e-mail address fields), so I don't think a framework would help there either. My advice would be to check if one of the libraries offer the functionallity you look for, and/or use/rewrite/copy the functions you can use from them. For most open source libraries it is possible to download the uncompressed source.

It needs to be said (by the way and perhaps well known allready) that client side form checking is regarded insufficient. You'll have to check the input server side too.

Answer 3

I do most new stuff in ASP.NET with AJAX, so I use the ASP.NET validators with the AJAX extenders, and they work great. However, if you are not into ASP.NET this isn't going to help you.

Most major JavaScript frameworks (jQuery, YUI, Prototype, etc) have validation capabilities, so you could consider them. But depending on your needs, you might regard it as overkill.

Previously (in ASP Classic) I used my own validation script which was only 6KB; I obviously don't now because I like the consistency and polish offered by these frameworks, but YMMV.

Answer 4

Before AJAX Libraries I used Validation.JS by Matthew "Matt" Frank.

The basic idea is that you include a JS file and then add attributes to your INPUT statement.

Example:

<input name="start-date" type="text" 
    display-name="Start Date" date="MM/YYYY" required="@getRequired()" />

Field will be validated as a date in MM/YYYY style. Any error message displayed will refer to the field as "Start Date". The "@" prefix will cause the getRequired() function to be evaluated at run-time.

A variety of things are provided as standard (Currency, Date, Phone, ZIP, Min/Max value, Max length, etc), and there is a keystroke filter; alternatively you can roll your own - most easily by just defining a Regular Expression for the field, but you can add Javascript Functions to be called to make the validation.

There are pseudo events for handlers to catch before/after field and form.

In additional to Attributes in the INPUT statement, validation actions can be applied to the field by JS:

// Set field background when in error state
document.MyForm["INVALID-COLOR"]="yellow";

// Show error messages on field blur
document.MyForm["SUPPRESS-ONCHANGE-MESSAGE"]=true;

document.MyForm.MyField.REQUIRED = true;
document.MyForm.MyField.DisplayName="Password";

Validation.JS is 28K (uncompressed)

I've had a bit of a trawl around to try to find an HTML file you can easily get to with details, but I can't fine one standalone that I can link to.

The source code is here:

http://code.google.com/p/javascript-form-validation/source/browse/#svn/trunk

and the DOCs are in the HTML files - but you can't view those as HTML, you have to download them and then view them, as far as I can make out