27 Sep 2009

Validity – flexible jQuery form validation

I was looking for a form validation plugin for jQuery that offers enough flexibility to hook in to my own rather complex forms and existing JavaScript. After auditioning several plugins I came across Validity which has seriously impressed me.

Validity, by Wyatt Allen, offers the key following features:

  1. Built-in validators for email, number, url, date, range, length, etc.
  2. Equal(), distinct(), sum(), etc, methods for advance validation.
  3. Use jQuery selectors to create rules for which fields to validate and compare.
  4. Easily extendable using your own regular expressions or js functions.
  5. Fully chainable validation. e.g. $("#lastname").require().minLength(2).maxLength(40).nonHtml();
  6. Optionally provide your own validation error messages.
  7. Multiple validation error display modes: Creates neat arrowed validation messages by each field with an error, or Modal mode, or Summary mode, or create your own! e.g. javascript text based alert, or outline error fields in red, or display errors at top of page, etc.
  8. Automatically picks up the name of each form field or use a friendly name with the title attribute. e.g. <input type=”text” id=”firstname” title=”First Name”>
  9. Validity can intercept the submit button or be called when you want it to (if you use ajax for example).
  10. Only 9KB in size

Some example uses:

$("#title").require().minLength(25).maxLength(250);
The title field is required, min char length is 25 and max length is 250.

$("#duration").require().match("integer").range(1,400);
The duration field is required, must be an integer, and numbers from 1 to 400.

$("#email,#email_confirm").require().match('email').maxLength(70).equal("Email addresses do not match");
Applies to both the email and email confirmation fields, both required, must be a valid email address up to 70 chars, and must be equal to each other. My own error message will be shown if they are not equal.

$("#postcode").require().match(/^([a-z][a-z]?\d\d? ?\d[a-z][a-z])$/i,"Postcode is invalid");
The postcode field is required and must match my own regex for UK postcode validation and will display my own message if it’s invalid.

Here’s the documentation with a couple of little demos. The home page is here and you can download the plugin from Google Code.

Well done Wyatt, this is a brilliantly thought out plugin leaving ample room for developers to customise their own validators, messages, and display rendering. Perfect! :-)

2 comments:

  1. Hi,
    May i know how i can show the custom error message for each field form in a specific area?
    eg

    First name [ textbox ]
    [span id ="firstname"][/span]

    When the First Name is not enter, the custom error message will showed in [span id ="FirstName"] ?

    Another question is, How i can used this jquery validation with the submit form with button type = [button] instead of type = [submit]?

    ReplyDelete
  2. Hello Anonymous. I haven't done any new work with Validity for a year so how it works isn't cached in my brain anymore, if you see what I mean. Have you checked out the documentation? http://validity.thatscaptaintoyou.com/Demos/index.htm

    I know what you want is possible to achieve. Sorry I don't have the time to investigate for you.

    ReplyDelete