Validation is one of the most important aspects of web form design. It can make the difference between gaining a fan or customer and having them leave in frustration. I’ve talked about validation best practices before, but I only alluded to how easy it is to add uber-useable and handsome looking validation to your forms using a validation library. There are so many outstanding client-side libraries that specifically target form validation that there is a very high probability that you can find one to suit your purposes. This article presents a few that I would recommend. All are free, but might ask for a donation. My personal view as a professional IT practitioner is that it takes a lot of time and effort to build production quality code. Therefore I usually give some money to the makers of any product that I use in any context outside of the most casual of circumstances.
ProtoForm
ProtoForm is an Ajax-based JavaScript plug-in built on the Prototype.js library. It uses suffixes on elements’ id attribute to specify what kind of validation is required. The title attribute contains the validation message:
<input type="text" id="name_Req" name="name" title="Required! enter your name" /> <input type="text" id="contact_Req_Email" name="email" title="Required! enter a valid email address" /> <input type="text" id="phone_Tel" name="phone" title="Enter a valid phone number" /> <input type="text" id="date_Date" name="date" title="Enter a valid date" />
Other parameters, such as stylesheets, whether or not to use Ajax to submit form data, and additional response messages can be set when the ProtoForm object is instantiated:
Event.observe(window,"load",function() {
new Protoform('myform', { ajax:false });
$$("form.myotherforms").each(function(forms){
new Protoform(forms);
});
});
Here’s what it looks like in action:
The current version is 2.0.
yav
Also at version 2 is a framework called yav. It supports real-time notifications, rule customization, advanced pre-condition and post-condition rules, and comes with multi-language support so that default messages will appear in the language of the yav version. It uses a pure JS implementation using an Array of rules information; the addHelp() method then creates the rules:
var rules=new Array();
rules[0]='username|required';
rules[1]='password|required';
rules[2]='password|minlength|8';
rules[3]='confirm|equal|$password';
rules[4]='email|required';
rules[5]='email|email';
yav.addHelp('username', 'Provide your username');
yav.addHelp('password', 'Provide your password');
yav.addHelp('confirm', 'Confirm your password');
yav.addHelp('email', 'Enter your e-mail');
Another cool feature of Yav is its use of masks. Unlike those you may have seen that are always visible, these masks show up as you type. That can make it hard to know what you should be entering beforehand, so you might want to show an example placeholder that disappears as soon as the user begins typing.
Dexagogo’s “Really Easy Form Validation”
The Dexagogo library, like ProtoForm, is also built upon the excellent Prototype JS library. It attaches to the form’s onsubmit or fields’ onblur events, where it reads the form elements’ classes and performs validation accordingly. If a field fails validation, advice is presented. One thing that I like better about Dexagogo’s validation configuration model over Protoform’s is that it uses the class attribute to define validation requirements. That might be a little safer than altering field names.
<input class="required validate-number" id="field1" name="field1" />
The Validation object constructor accepts a number of additional options to set behavioral properties. For instance the {immediate : true} option triggers field validation on elements’ onblur() event:
new Validation('myForm',{immediate : true});
I recently had the opportunity to try out Dexagogo on a project that I was developing. In addition to the built-in validation rules, the library also provides a fairly simple way of adding your own rules, via the Validation.addAllThese() method. It accepts an array of arrays, each containing the rule name, message, and test function. A return value of true means that the field value passed. Here are what my custom rules looked like:
Validation.addAllThese([
['validate-fund-min', 'The fund must have a starting value of $100 or more.', function(v) {
return v >= 100;
}],
['validate-positive', 'A negative number is not a valid value for this field.', function(v) {
return v >= 0;
}],
['validate-symbol', 'The ticker symbol should be in the format of XYZ or XYZ.TO.', function(v) {
return /^[A-Z]{2,3}(\.[A-Z]{2})?$/i.test(v);
}],
['validate-margin-amount', 'Please enter a margin amount.', function(v) {
return !$('optMarginLimitTotal').checked || $('optMarginLimitTotal').checked && !Validation.get('IsEmpty').test(v);
}],
['validate-margin-percentage', 'Please enter a margin percentage.', function(v) {
return !$('optMarginLimitPercent').checked || $('optMarginLimitPercent').checked && !Validation.get('IsEmpty').test(v);
}],
['validate-date-range', 'The End Date must be at least one week later than the Start Date.', function(v) {
return Validation.get('IsEmpty').test(v)
|| Date.daysBetween(getDateFromFieldValue(jQuery('#startDate').val()),
getDateFromFieldValue(v)) >= 7;
}]
]);
Dexago’s webpage has the instructions on how to use it, a demo*, and a link to the source code on Github.
*I encountered errors using the online demo, but the same pages in the downloadable zip package worked fine.
One feature that I would like to see implemented is the ability to exclude certain fields from inline validation. I can’t categorically claim that Dexagogo is not able to do it, but it might be enough work to stray from the “Really Easy Form Validation” mantra.
Conclusion
To really rev up your web forms, consider using a form style template along with the validation library of your choice. That’ll make your forms look great as well as highly useable.
