Powerful Open Source jQuery Form Validation Plugins
This page may contain links from our sponsors. Here’s how we make money.
Form validation is the process of taking values from a form field and testing against a set of requirements. The most popular example is password validation requirements like capital letters, numbers, or symbols.
Most form validation is written in JavaScript so it can operate on the frontend. This allows developers to halt form submissions until all input is completely valid.
But instead of writing JS validation from scratch, why not use a library like jQuery?
These free plugins are perfect for jQuery form validation covering numerous input fields and validation styles. You can download any of these completely free for any project and even include multiple plugins together when needed.
jQuery Form Validation Plugins
jqBootstrapValidation
Twitter Bootstrap users will enjoy jqBootstrapValidation. It’s a free jQuery plugin tied into Bootstrap forms for validation.
This works with everything from text input fields to select menus and radio buttons. Errors can be handled on the frontend or backend, plus there are a handful of custom features that can be added through code. Check the demo site or GitHub repo for more info.
Parsley.js
Frontend validation with Parsley.js is easy as parsley-flavored pie. This library can auto-detect changes with HTML5 elements and generate responses immediately. This runs with Ajax code and gives developers access to over a dozen built-in form validation schemes.
FormValidation
One of the absolute best plugins you could try is FormValidation. This operates on top of frameworks like Bootstrap, Foundation, Semantic UI, and many others.
But this validation library can work with plain HTML/CSS files as well. It comes with hundreds of settings for every type of form field and validation type. And of course, everything runs on jQuery so the syntax is a breeze.
Happy.js
If you’re looking for a smaller validation plugin check out Happy.js. It can operate through jQuery or Zepto with a focus on all types of form fields.
Happy.js supports custom trigger events like focus, blur, and form submission. Plus it allows custom validation and error types for any input field.
Fancy.js
Fancy Form is a newer validation library currently in version 0.2.6. It allows for easy theming and custom Ajax support for individual form fields. Check out the GitHub repo for a free download and online documentation.
Masked Input
The Masked Input plugin doesn’t force validation but instead forces input formats. This allows developers to create custom fields for telephone numbers or street addresses, along with any other type of expression.
Validate
jQuery Validate is a very simple plugin running on data attributes. HTML5 forms will benefit the most from this plugin which can pull validation individually from attributes like data-conditional and data-required.
Guardian
The Guardian plugin runs on jQuery 1.7.x or higher and targets all form input fields. Documentation is a little sparse so it may require research and a bit of practice. But overall Guardian runs smooth and doesn’t require a whole lot of syntax to get running.
Validetta
Currently in version 1.0, Validetta is a newer jQuery plugin with compressed file size. You can run this plugin with ease in all major browsers including IE8+.
Validetta has lots of online documentation and plenty of code samples to choose from. You can simply copy and paste code for validation styles and customize them to suit your needs.
Validate.js
The very popular Validate.js suite has been around for a few years and offers quality form validation. It can work on jQuery but requires no actual dependencies, so vanilla JavaScript is OK too.
This validation library operates in IE6 and above with large browser support. You can supply your own custom validation rules and even chain validation together so they impact multiple fields at once.
Validity
Validity is a powerful yet simple jQuery plugin with simple operations. Just target the form you want to validate and run custom checks within the function.
Validity can match cases and numbers, check if a field is empty, or even perform both on the same field! Take look at the online documentation if you want to learn more.
jQuery Payment
Stripe is the newest online payment system meant to compete with PayPal in many regards. The Stripe team built their own free open source jQuery plugin named jQuery Payment.
As the name suggests, this is made for payment validation of various credit card companies. The library has built-in algorithms and regular expressions so all you need to do is check the card time and run a function.
Validate Helper
The Validate Helper library actually works on top of Validate.js for form checks. It allows developers to craft custom form validation without a validation object. Attributes are instead added directly to the form elements and operate naturally through JavaScript.
Validate Helper does require Bootstrap so it’s not as simple as you might expect. But it can be a great alternative to devs who like using Bootstrap as a primary web framework.
jQuery validVal
validVal is a unique jQuery validation plugin that works on top of HTML5 input fields. The new HTML5 spec comes with many additions that aid in the validation process. Since this builds on top of HTML5 it doesn’t rely heavily on JavaScript, making it a very lightweight solution.
jQuery Form Validation Plugin
This jQuery Validate plugin is definitely older but comes with a larger library of code. Based on the GitHub page it doesn’t appear heavily supported. But updates do roll out occasionally.
It can operate through Grunt so it’s a fantastic choice if you’re into the automation tool workflow.
Wrapping Up
Hopefully, some of these validation plugins can improve the form design and user experience of your websites. All of these are completely free and super easy to set up.
Test out some of your favorites and see if they can work in any future projects.
For even more jQuery plugins check out these related posts:
