Form validation. Two words that send shivers down any developers back. Building a form? No problem. What about validating it? No comment.
What we have for you today is a selection of robust, reliable and easy-to-use form validation jQuery plugins and libraries that will make your life a heck of a lot easier. Here they are:
data-validate attribute in the input tag. It will string together rules like
required,number,range=0-99, then you add the
.quickValidate class, add a
data-name attribute to name your field for errors, and you’re good to go.
jQuery Ketchup Plugin
Ketchup is a lightweight (3.4KB minified) plugin that comes packaged with 18 basic validations, but does allow you to easily write your own validations and overwrite any default behaviours.
By default the plugin will check the
data-validate attribute of a form field to see if it can find any matching validations. The default indicator for validations is
validate(), all validations go in there and are separated by a comma. Validations can also have arguments (also separated by a comma).
jQuery Validation Plugin
jQuery Validation is a ‘drop-in’ plugin that makes clientside form validation very easy. It comes packaged with a useful set of validation methods, while also providing an API to easily write your own.
All that is needed to get started with this plugin is single line of jQuery to select the form and apply the plugin, plus a few annotations on each element to specify the validation rules.
IV.js is a jQuery library that provides an intuitive way to work with validation filters and processing of user inputs. In order to work with IV.js, you need to add the IValidate class to the form.
jQuery Validation Engine
When it comes to the jQuery Validation Engine, you don’t need to worry about the structure of your form as the plugin will create an error
DIV and position it in the top right corner of the specified input, keeping both the forms code and validations seperate. Phis is probably the easiest validation solution in this article.
Validatr uses HTML5 input attributes to perform validation, with support for
range. The input types
radio…. are supported, but do not require the same level of validation.
Where possible, Validatr will use native validation, using Modernizr to test for support. If an input type is not supported it will use it’s own ruleset to supplement native validation. In both cases case, the validation message is shown.
Formance.js is a library for formatting and validating form fields, based on and inspired by Stripe’s jQuery.payment library.
Fields.js comes with an MIT license and offers an abstract way of interacting with fields.
jQuery Validate is a jQuery plugin for that helps you accomplish easy and quick form validation using data attributes.
jQuery Form Validate
jQuery Form Validate is another jQuery plugin that lets you validate your HTML forms by taking validation rules from HTML 5 data attributes applied to each input.
One-Validation is a collection of regular expressions for general validation purposes. In order to validate, it splits up the regexes into semantic parts of the pattern.
Validate Barebones Validation
Validate Barebones Validation, as is obvious from the name itself, is a configurable and extendable barebones jQuery validation plugin.
nextVal is a client-side form validation plugin for jQuery.
jQuery Super Labels Plugin
The jQuery Super Labels Plugin makes the label slide across the field when gaining focus and fade out when a value is entered.