Advanced Field Validation with AJAX
Many of you may have experience with Magento event system, so this help page will be easy to get into.
In many cases you may require instant field validation with backend queries which can be achieved with AJAX technology.
Let's create AjaxValidation extension which handles frontend field validation with AJAX and server side validation with PHP.
ONLINE DEMO: CLICK HERE.
AjaxValidation file structure
It contains 6 files in total.
app / etc / modules / Mageme_AjaxValidation.xml
This file registeres and enables extension in Magento
app / code / local / Mageme / AjaxValidation
This folder contains main extension files.
etc / config.xml
In this file we are registering model for our extension and hook it to WebForms event "webforms_validate_post_result". The event is used to add custom server side validation.
Helper / Data.php
Here we define Helper which holds validation rules: CSS class to trigger the required field, validation algorithm and validation error text. Our validation algorithm is very basic: we search through 'one', 'two', 'three' strings array for required value.
controllers / ValidateController.php
Our controller handles the AJAX request which checks the field data when client enters text.
Model / Observer.php
Observer validates submission data on WebForms event "webforms_validate_post_result". If customer tries to hack the form and remove the validation from the HTML source of the page we validate the submission through the server event so that it doesn't come through.
app / design / frontend / base / default / template / ajaxvalidation / js.phtml
Now we edit the field and add validation class in Design tab: CSS classes for the Input element.
That's all. You can download sources here.