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
- 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.
|jQuery Validation Plugin||5||4||4||3||5 (MIT)||4.2|
|jQuery Ketchup Plugin||4||4||4||4||5 (MIT)||4.2|
jQuery Validation Plugin (/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.
- Site: Validate.js
- License: MIT
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.
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.
- Site: Verify.js
- License: MIT
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:
- 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.
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.
- Site: Validatious
- License: BSD
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 Plugin (/5)
- Site: jQuery Ketchup Plugin
- License: GPL MIT
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.
- Site: Garlic.js
- License: MIT
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!