如何在键入时验证Magento Javascript中的表单

Question

Magento has awesome Javascript validation library, which can be initialized var myForm= new VarienForm('[your form id]', true); . However this validation function is triggered when one click on submit button.

Is not there way to validate particular field as you type. For example if I type postal code 2 digit and go to second field, it should instantly validate postal code and show error. As postal code require at least 5 digits.

thanks

Answer 1

Yes, Magento provide awesome validation library. You can call validation for each field with `validate' method.

For example to validate zip code, you can observe blur event and call validate method.

$('billing:postcode').observe('change', function(e){
    Validation.validate($('billing:postcode'))
})

Notice Validation.validate($('billing:postcode')) , this will call validation for postcode field.

Answer 2

First, create for your form.

<form action="<?php echo $this->getUrl('/some/route/thing');?>" id="theForm">
    <input type="text" name="foo" id="foo" />
</form>

Next, run this bit of javascript to turn your plain old form into VarienForm

<script type="text/javascript">
//<![CDATA[
    var theForm = new VarienForm('theForm', true);
//]]>   
</script>

Then, write your validation as a javascript function using the Validation.add method. (Validation is a global used to store all form validation rules)

<script type="text/javascript">
//<![CDATA[
    var theForm = new VarienForm('theForm', true);
    Validation.add('validate-must-be-baz','You failed to enter baz!',function(the_field_value){
        if(the_field_value == 'baz')
        {
            return true;
        }
        return false;
    });

//]]>   
</script>

For more info follow this link .

Answer 3

You can write a custom validation class:

Validation.add('validate-float','Error message',function(v){
    return Validation.get('IsEmpty').test(v) || (!/\./.test(v));
});

see - https://magento.stackexchange.com/a/15165/4832

Answer 4

Not adding anything new here, but if you want to cut-and-paste a quick way to create multiple validations for your form, just add to the fields array:

var fields = ['firstname', 'lastname', 'telephone', 'street1', 'region_id', 'country_id', 'city', 'postcode'];

fields.map( function (fld) {
    $('billing:' + fld).observe('change', function(e){
        Validation.validate($('billing:' + fld))
    });
});

Answer 5

Not 100% on how you'd implement it, but you can use Prototypes Event listener. I've tried hooking in to Magento's form validation once before in order to stop multiple form submissions, the code was similar to what's below but I've changed it a bit to fit with your requirements:

new Event.observe('contactForm', 'keyup', function(e){
    e.stop();

    if(contactForm.validator && !contactForm.validator.validate()) {
        //do something here because it failed validation
        return;
    }


});