Magento rewrite functions in validation.js

magento

Hi you, today, I will guide how to rewrite functions in validation.js,
validation.js in js/prototype/validation.js, it check validation of all form in Magento website
You can use simple as below code for per form:

var dataForm = new VarienForm('form_id');

Here, I will rewrite validate function.

Step 1: Create a new file
example: custom_validation.js in skin/frontend/packed_theme/theme/js/custom_validation.js

Step 2: Add that file to layout xml
app/design/frontend/packed_theme/theme/layout/page.xml
I will add to page.xml file, you need add after validation.js

<default translate="label" module="page">
    <label>All Pages</label>
    <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
        <block type="page/html_head" name="head" as="head">
		...
		...
        <action method="addItem"><type>skin_js</type><name>js/custom_validation.js</name></action>
    </block>
</default>

 

Step 3: Wewrite content in custom_validation.js
I add a notice “New validate function” to first line function.

Object.extend(Validation.prototype, {
//or Object.extend(Validation, {

    validate : function() {

	alert('New validate function');

        var result = false;
        var useTitles = this.options.useTitles;
        var callback = this.options.onElementValidate;
        try {
            if(this.options.stopOnFirst) {
                result = Form.getElements(this.form).all(function(elm) {
                    if (elm.hasClassName('local-validation') && !this.isElementInForm(elm, this.form)) {
                        return true;
                    }
                    return Validation.validate(elm,{useTitle : useTitles, onElementValidate : callback});
                }, this);
            } else {
                result = Form.getElements(this.form).collect(function(elm) {
                    if (elm.hasClassName('local-validation') && !this.isElementInForm(elm, this.form)) {
                        return true;
                    }
                    return Validation.validate(elm,{useTitle : useTitles, onElementValidate : callback});
                }, this).all();
            }
        } catch (e) {
        }
        if(!result && this.options.focusOnError) {
            try{
                Form.getElements(this.form).findAll(function(elm){return $(elm).hasClassName('validation-failed')}).first().focus()
            }
            catch(e){
            }
        }
        this.options.onFormValidate(result, this.form);
        return result;
    }
});

 

From here, you can custom function all follow your want.

Thanks for watching!