Next time you or your web developer is implementing web form validation on your site, this is where you should look. There are a number good JavaScript validation libraries, but no independent or complete rankings of them.

Half of the problem of creating optimised web forms is usually not only to analyse and really know what is working and what is not. Half of the problem is to actually implement something that removes the pitfalls for the end user. And one of the most common pitfalls the end user experience when they fill in forms online, is input validation.

Method of evaluation

So, how should one rank the best JavaScript validation libraries? Is it easy to integrate? Does it work with other frameworks or libraries? The method that appeared after some research were:

  • Usage (user activity/owner activity/social proof) – one factor should be how used the library is. This is really hard to measure, but we should be able to tell activity in some way. If the library is used a lot, our hypothesis is that it is also good but more importantly other users in the community could provide support.
  • Developer Experience – through the developers eye, how well is the documentation structured? Implementation wise, is it easy to use for the developer? Is it easy to integrate with server side validation (which in all cases is essential)?
  • Dependencies – fewer is better
  • End User Experience – does it really validate your web forms in a good way for the end user. Analysing web forms have given us the knowing of what usually works or what usually does not. The overall end user experience when having it implemented is probably the most important factor in the quality of any validation library. This is mostly derived from real user experience in the demos.
  • Scope – Does it provide tools for validating fields like e-mail or other more complicated cases. How big is the scope of the project? How complete is it in terms of different cases of web form validation.
  • License – one important aspect for even being able to use the library or plugin in production is its License.

In the end, these factors became the definition of how good the different libraries are. For each library or plugin we would measure each factor and rank them one to five.

Usage Developer Experience Scope Dependencies License AVG
Score
jQuery Validation Plugin 5 4 4 3 5 (MIT) 4.2
Validate.js 5 4 3 5 5 (MIT) 4.4
Parsley 5 5 4 4 5 (MIT) 4.6
Verify.js 5 3 4 4 5 (MIT) 4.2
gvalidator 3 3 3 5 4 (LGPL) 3.6
Validatious 0 0 3 3 4 (BSD) 2
Validity 5 4 4 4 3 (?) 3.8
jQuery Ketchup Plugin 4 4 4 4 5 (MIT) 4.2
Garlic.js 4 4 4 4 5 (MIT) 4.2

jQuery Validation Plugin

jQuery Validation Plugin (4.2/5)

In my perspective, jQuery Validation seems to have been there forever. It has reached version 1.11.1 (changelog started at 1.0) and is tested with jQuery 1.6.4, 1.7.2, 1.8.3, 1.9.0. One part of its success might actually be its name. From my own experience a generic name + jquery plugin will generate traffic via the jQuery plugin site and Google. It is built by jQuery mega creator Jörn Zaefferer.

It’s scope cover mostly everything. Error containers, dynamic forms, file uploads are examples of such. It does have one downside though and that is its jQuery dependency (at least for this comparison), but if you are already dependent on that you’ll be perfectly fine.

It´s got great documentation and is really well used. The demos are plenty as well and covers more than the basic use cases.

Validate.js - Form Validation plugin

Validate.js (4.4/5)

Designed to be lightweight, validate.js weighs in at around 2kb when gzipped. That together with it being independent I think is its biggest USP. It also comes with large a set of predefined validations as well as a method to create your own validations. Written as “in progress” is a Node.js version, which is also interesting.

Its documentation is easy to get and the overall feeling when reading about the project and integration is really good. Being in a corporate environment stuck in the 90’s you will really like this library because of its support for IE6. That feature though might actually have be a con, scaring developers away :)

Something I miss with its documentation is some more examples. As with any plugins/libraries I really want to try it out first before I implement.

Parsley.js form validation plugin

Parsley (4.6/5)

The title says “Javascript forms validation. Powerful, UX aware & Dead simple.” and the library weighs in at around 12kb when minified. The version currently states 1.1.18 and depends on jQuery or Zepto (Zepto is provided in a bundled version as well).

From looking at the API comparing it directly with a really well crafted and big complete bootstrap plugin feels fair. You simply put data attributes indicating how to validate each field. It can smoothly use the HTML5 built in validators when possible as well. The examples are well structured and really demonstrates each type of validation really well.

Also its documentation and demos feels solid and it comes with several predefined constraints, type constraints and extra validators. It also has built in support for localization and integrates well with other frameworks like Django or Rails.

Verify.js form validation plugin

Verify.js (4.2/5)

The first thing I read on the documentation is “As this library and corresponding documentation is a work in progress, this API is subject to change.” which can be a bad thing although nice of the creator to tell the audience. It´s features/usp:

  • Unobtrusive
  • Easily extendable
  • Configurable validations with parameters
  • Fully customisable asynchronous validations
  • Grouped validations

It does however depend on jQuery.

The API works much like Parsley above setting data-attributes to each field telling it how and what to validate. The same way you can tell it to group certain validations.

gvalidator validation plugin

gvalidator (3.6/5)

This library is independent and promises some unique features:

  • Easy Internationalization
  • Simple plug-in mechanism for new validators, should you want to extend functionality

Unfortunetaly the demos was not there so the ability trying it which I think is essential did not exist. Its documentation is thorough, although not as well structured and readable as parsley.js or verify.js. From looking at the documentation alone, it doesn’t look like its scope is as wide as the other either.

Validatious

Validatious (2/5)

Validatious seemed to have potential last time I checked, but now I can’t even read the documentation because of the site generating a 500 error. When I saw who was its author I would love to see more. Christian Johansen‘s name seem to appear a lot when working with JavaScript, author of sinon.js and a well respected JS programmer and all.

Validity form validation

Validity (3.8/5)

With an unknown License but a fitting name, this plugin is a pure jQuery plugin. It claims to have an easy setup, consisting of unobtrusive JavaScript (which differs from most others) and a customisable appearance which of course is a nice to have when it comes to validation messages. Nothing new here.

Its first page clearly demonstrates how easy it is to setup and use and it has a long well written documentation page, although a bit messy in some places. Its API looks like it is based on chaining validators and seems easy to write for.

jQuery ketchup

jQuery Ketchup Plugin (4.2/5)

Without having looked at this library’s code, I ask myself how it actually works. It’s API is inline and written with data-attributes (eg: data-validate="validate(required, email)) which basically means it probably has to parse this code somehow. Writing validation functions inline seems a bit of, but coming to think about it most of the libraries are actually built for doing so. Not the nicest API though.

Garlic.js

Garlic.js (4.2/5)

Garlic.js seems to advertise Parsley, which seems weird on a first look. “Parsley.js: validate all your forms frontend without writing a single line of javascript!” it says clearly on the right of the documentation page. Without knowing why that is, already knowing Parsley.js I ask myself why I should use Garlic?

The results

Based on the method above, we have a clear winner for this comparison. Parsley.js wins the grand title of being my favourite plugin for client side JavaScript validation.

Looking through tons of documentation and trying out form validation plugins my conclusion on which route to go when it comes to inline API’s or the more unobtrusive way is that enabling both ways (like bootstrap) is the best way to go. The second most flexible is actually doing it only inline, if your server side models are not shared with the client side that is.

You should always make sure to validate server side first and having server side frameworks such as Ruby on Rails generating validation messages to fallback on fits really nice if you are doing things inline.

Another important aspect is independency if you are not locked into the jQuery swamp.

This might help you choose a good Form Validation plugin in the future, I really hope so!

What did I miss? Tell me in the comments!

Tags: ,

Hi there fellow citizen of the Internets! I'm Jonas Arnklint (@arnklint), the technical co-founder of RevRise. Besides trying to provide value to you and tell you about what I've learnt from doing Conversion Optimisation and building RevRise, I love spending time on skiing, hiking and traveling. I'm sure this would be even better if you wrote what you are thinking right now below here. Cheers!

More about Jonas Arnklint
 
  • Adrian

    What library do you like the most when it comes to looks and feel in the UI?

    • http://arnklint.com Jonas Arnklint

      The one with good defaults in terms of UI is probably Parsley, the reason being it adds semantically good error messages, leaving me to style them myself. I think that is a feature.

  • Adrian

    Thanks! I’ve used the jquery validation before, but for the next project I will probably go with parsley.js. Just tried the demoes and sort of like it.

    • http://arnklint.com Jonas Arnklint

      Nice, hope you’ll get some use of it! What did you not like about this post?

      • Adrian

        I think it was good in general.

        Do you know if there is any good javascript library with extensive support for different types of string formats. E-mail would be a fairly trivial thing, but rather personal security number or address formatting etc?

        • http://arnklint.com Jonas Arnklint

          Thanks Adrian,
          Without having digged deeper in your need, I don’t know any validation plugin/framework/lib for specific more unique validation formats. However, Parsley and most other has support for extending the current ones. Good luck!