HTML5 introduced new form attributes so that the browser could validate forms natively. With CSS3 and JavaScript you can realize a basic form validation without the need of a plugin – as described in this article. But this has a few restrictions:
- 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.
1. Parsley
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
One of the first validation plugins from 2006. It lets you specify custom validation rules using HTML5 attributes or JavaScript objects. It also has a lot of default rules implemented and offers an API to easily create rules yourself. Finding detailed information about the plugin may be hard at first and it’s limited to jQuery 1.x, but they promised to make it better – see this campaign.
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.
5. Smoke
Smoke is a collection of components for Bootstrap – including a form validator. In comparison to the other Bootstrap validator (#4), it doesn’t use native browser validation – therefore error messages aren’t automatically localized and validation rules have to be specified using HTML5 and data attributes, as well as JavaScript.
See the Pen Smoke Form Validation Plugin Demo by SitePoint (@SitePoint) on CodePen.
6. FormValidation
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.
7. Validatr
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.
8. Validetta
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.
9. jQuery.validity
A plugin to control validation with JavaScript only – no HTML5 or data attributes. While this may be helpful for dynamic validation rules, the plugin doesn’t offer enough options to make writing efficient. It even doesn’t allow using new HTML5 type attributes like email, nor does it provide a function to check if a form is valid – necessary in order to show a success message.
See the Pen jQuery.validity Plugin Demo by SitePoint (@SitePoint) on CodePen.
10. h5Validate
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.
Conclusion
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!
Frequently Asked Questions (FAQs) about jQuery Form Validation Plugins
What are jQuery Form Validation Plugins?
jQuery Form Validation Plugins are tools that help in validating the data entered in the form fields on a webpage. They ensure that the data entered by the user is correct and in the required format before it is submitted to the server. These plugins are built using jQuery, a fast, small, and feature-rich JavaScript library. They provide an easy and efficient way to validate form fields, reducing the amount of manual coding required.
How do jQuery Form Validation Plugins work?
jQuery Form Validation Plugins work by checking the data entered in the form fields against certain predefined rules. These rules can include checks for required fields, valid email addresses, matching passwords, minimum and maximum length of input, and so on. If the data entered does not meet these rules, the plugin displays an error message, preventing the form from being submitted until the errors are corrected.
Why should I use jQuery Form Validation Plugins?
Using jQuery Form Validation Plugins can greatly simplify the process of form validation. They save you from having to write complex JavaScript code to validate each form field individually. They also provide a consistent way to handle form validation across different browsers and devices. Moreover, they improve the user experience by providing immediate feedback on any errors, allowing users to correct them before submitting the form.
How do I install a jQuery Form Validation Plugin?
To install a jQuery Form Validation Plugin, you first need to include the jQuery library in your webpage. Then, you can download the plugin and include it in your webpage using a script tag. Some plugins may also require additional CSS files to be included for styling the error messages.
Can I customize the error messages displayed by the jQuery Form Validation Plugin?
Yes, most jQuery Form Validation Plugins allow you to customize the error messages. You can change the text of the messages, the style in which they are displayed, and even the language in which they are written. This allows you to tailor the error messages to your specific needs and to the language and culture of your users.
Are jQuery Form Validation Plugins compatible with all browsers?
jQuery Form Validation Plugins are generally compatible with all modern browsers that support JavaScript and jQuery. However, the level of compatibility may vary between different plugins and different versions of the same plugin. It is always a good idea to test the plugin in different browsers to ensure that it works as expected.
Can I use multiple jQuery Form Validation Plugins on the same webpage?
While it is technically possible to use multiple jQuery Form Validation Plugins on the same webpage, it is generally not recommended. Using multiple plugins can lead to conflicts and can make the webpage slower to load and respond. It is usually better to choose one plugin that meets all your needs and stick with it.
How do I update a jQuery Form Validation Plugin?
To update a jQuery Form Validation Plugin, you can download the latest version of the plugin and replace the old files with the new ones. Some plugins may also provide an update function that automatically downloads and installs the latest version.
Can I use jQuery Form Validation Plugins with other JavaScript libraries?
Yes, jQuery Form Validation Plugins can be used with other JavaScript libraries. However, you need to be careful to avoid conflicts between the libraries. jQuery provides a noConflict function that allows you to use jQuery with other libraries that use the $ symbol.
Are there any alternatives to jQuery Form Validation Plugins?
Yes, there are many alternatives to jQuery Form Validation Plugins. These include native HTML5 form validation, server-side validation, and validation libraries for other JavaScript frameworks such as AngularJS and React. However, jQuery Form Validation Plugins are still a popular choice due to their ease of use and wide range of features.
Julian KühnelJulian is a passionate software developer currently focusing on frontend technologies and loves open source.
Sam DeeringSam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
