Monday, August 2, 2010
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.
- form controls are divided into three categories. those validated by themselves, those validated as a group and those checkbox , radio groups
- validation groups are specified through the configuration setting
- 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:
|Account info, change password visible|
the account page when change password is checked, need to validate password and password confirmation matches.
if( $(‘#change_password’).length>0 && !$(‘#change_password’).checked)
$(“#change_password”).click( function ()