jQuery Validate (http://bassistance.de/jquery-plugins/jquery-plugin-validation/) is very versatile plugin to validate forms. Although this plugin lacks detailed documentation, a quick look into the ‘jquery.validate.js‘ file gives you a lot of ways to customize various aspects of validation. I recently used this plugin with Twitter Bootstrap (http://twitter.github.com/bootstrap/). I quickly coded up a sample form and played around with the options.
The functions which were not mentioned quite briefly were ‘unhighlight‘ and ‘highlight‘. These toggle the CSS class for the element being validated from ‘error‘ to ‘success/valid‘ and vice versa. These functions are response to the ‘error’ and ‘success’ fired events. Below is a sample implementation which customizes the error messages by overriding these functions.
$("#registerForm").validate({
debug:true,
errorElement:"span",
errorClass:"error",
validClass:"success",
unhighlight: function(element, errorClass, validClass) {
if (element.type === 'radio') {
this.findByName(element.name).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
} else {
$(element).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
$(element).next("span").addClass("okIcon");
}
},
highlight: function(element, errorClass, validClass) {
if (element.type === 'radio') {
this.findByName(element.name).parent("div").parent("div").addClass(errorClass).removeClass(validClass);
} else {
$(element).next("span").removeClass("okIcon");
$(element).parent("div").parent("div").addClass(errorClass).removeClass(validClass);
$(element).parent("div").parent("div").css("margin-left","0px")
.css("padding-left","0px")
.css("padding-top","0px")
.css("padding-bottom","0px")
.css("margin-bottom","9px");
}
}
Note: The sample is missing the ‘rules’ section required for validation.
