jQuery form validation plugin for Magento theme (with demo)

Monday, August 2, 2010

 

The validation plugin is designed for both customer facing (user sign up, checkout, account management ,etc)and admin interfaces. Two use cases are supported: standalone mode for classical form submit, where the submit is blocked until the form passed the validation and API mode, when the plugin is integrated into other script, like in checkout process.and is submitted via AJAX calls.
The plugin is partially inspired by the famous jQuery Validation plugin, but is simpler and tailored for the Magento theme specific UI  behavior, like toggling visibility of part of the form. The business logic requires only visible part been validatedThe validation failure notification follows Magento theme convention, marking the controls class with “validation-failed” and the CSS rule will take care the rest. An exception is checkbox and radio button,  the latest browsers fixed the bugs in earlier generations and the error class have to be added to the wrapper SPAN, created dynamically.

The other Magento theme UI specific requirements, and in fact quite general ones, are some controls have to be validated as a “whole”.  The sign up page password and password-confirmation need to match, the credit card expiration date are composite of two inputs, one for month, one for year and the combination of both determines if the inputs are valid.

Validation rules are class based, a field has class “validate-cc-number” will trigger the credit card validation rule and more validation rules can be added as required.

The design:

1. form controls are divided into three categories. those validated by themselves, those validated as a group and those checkbox , radio groups
2. validation groups are specified through the configuration setting
3. testing the visibility as validation time

demo of the Address Book page using CSS and HTML from the magento demo site

some screen shots of the validation in action:

Address Book

Sign In

Account info, change password visible

the account page when change password is checked,  need to validate password and password confirmation matches.
$(document).ready(function() {
$(‘form’,'div.col-main’).validate(
{
groups:{password:['password','confirmation']}
});

if( $(‘#change_password’).length>0  && !$(‘#change_password’).checked)
$(‘#passwordset’).hide();
$(“#change_password”).click( function ()
{
if(this.checked)
$(‘#passwordset’).show();
else
$(‘#passwordset’).hide();
});
});