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:
- Built-in validators for email, number, url, date, range, length, etc.
- Equal(), distinct(), sum(), etc, methods for advance validation.
- Use jQuery selectors to create rules for which fields to validate and compare.
- Easily extendable using your own regular expressions or js functions.
- Fully chainable validation. e.g. $("#lastname").require().minLength(2).maxLength(40).nonHtml();
- Optionally provide your own validation error messages.
- 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.
- 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”>
- Validity can intercept the submit button or be called when you want it to (if you use ajax for example).
- 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! :-)
Posts
