10 jQuery Form Validation Plugins
This popular article was updated on 8th August, 2016 to reflect the current state of form validation plugins. Comments pertaining to the old article were deleted.
- Error messages are left to the browser itself, you can only provide titles of input fields
- You aren’t able to customize the styling of error messages
- You’ll have to create patterns for input fields yourself
The following 10 jQuery form validation plugins set themselves the goal of customizing error messages and styling, as well as simplifying the creation of validation rules.
An extensible plugin that offers ordinary options like localization and custom validation rules, but also a remote Ajax validation. The documentation is clean and easy to read and the project is actively maintained. Validation rules can be controlled using HTML5 form or custom data attributes.
See the Pen Parsley Plugin Demo by SitePoint (@SitePoint) on CodePen.
2. jQuery Form Validator
A modular plugin, that offers a basic set of validation rules by default and lets you load further modules on demand. For example: a file validator when uploading files, but also date, security or location modules. It also allows you to provide input suggestions. The validation is controlled with HTML5 data attributes.
See the Pen jQuery Form Validator Plugin Demo by SitePoint (@SitePoint) on CodePen.
3. jQuery Validation Plugin
See the Pen jQuery Validation Plugin Demo by SitePoint (@SitePoint) on CodePen.
4. Bootstrap Validator
A jQuery validation plugin for Bootstrap. It’s basically just a wrapper around native form validation using HTML5 attributes, but can also be used to add custom rules. It always shows error messages from the browser, automatically translated into the correct language.
See the Pen Bootstrap Validator Plugin Demo by SitePoint (@SitePoint) on CodePen.
See the Pen Smoke Form Validation Plugin Demo by SitePoint (@SitePoint) on CodePen.
A premium jQuery validation plugin from 50$ with built-in integrations for Bootstrap, Foundation and others. It has a huge amount of validation rules as well as options and could be profitable for applications with many complex forms.
A very basic wrapper for form validation by the browser that uses native error messages wherever possible, controlled with HTML5 form attributes. It can be used as polyfill or to customize error message styling. Nothing more, nothing less.
See the Pen Validatr Plugin Demo by SitePoint (@SitePoint) on CodePen.
This plugin offers validation using a data attribute, with quite limited options. It comes with just the basic validation rules, everything else can be added with custom regular expressions – but there is no example demonstrating it. Compared to the other plugins, the only unique feature is that error messages are displayed in a bubble (see demo below).
See the Pen Validetta Plugin Demo by SitePoint (@SitePoint) on CodePen.
See the Pen jQuery.validity Plugin Demo by SitePoint (@SitePoint) on CodePen.
This plugin has unfortunately been abandoned by its creator (Eric Elliott). Consequently, the demo/documentation website returns a 404 and there are two dozen open issues. The plugin doesn’t automatically validate inputs by type and the following example even doesn’t show error messages. We’ve included it in the list, as Eric is looking for a new maintainer for the project, so there’s a chance that at some point in the future, it might get some life breathed back into it.
See the Pen h5Validate Plugin Demo by SitePoint (@SitePoint) on CodePen.
Well, that’s the top ten list of popular jQuery form validation plugins. If you’ve had any experience with these (good or bad!), or if you know of other form validation plugins worth mentioning, please let us know in the comments!