如何在Magento Javascript中验证表单

How to validate form in Magento Javascript as you type

本文关键字：验证 表单 Javascript Magento      更新时间：2023-09-26

Magento有很棒的Javascript验证库，可以初始化var myForm= new VarienForm('[your form id]', true);。然而，这个验证功能是在点击提交按钮时触发的。

无法在键入时验证特定字段。例如，如果我输入邮政编码2位数字并进入第二个字段，它应该立即验证邮政编码并显示错误。因为邮政编码至少需要5位数字。

谢谢

是的，Magento提供了很棒的验证库。您可以使用' validate'方法对每个字段调用验证。

例如，为了验证邮政编码，您可以观察blur事件并调用validate方法。

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

注意Validation.validate($('billing:postcode'))，这将调用邮政编码字段的验证

首先，创建表单。

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

接下来，运行这段javascript代码，将普通的旧表单转换为VarienForm

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

然后，使用validation将验证写为javascript函数。添加方法。(Validation是一个全局变量，用于存储所有表单验证规则)

<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>

更多信息请点击链接

您可以编写一个自定义验证类:

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

参见- https://magento.stackexchange.com/a/15165/4832

这里没有添加任何新内容，但是如果您想通过剪切和粘贴的方式快速地为表单创建多个验证，只需添加到fields数组:

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))
    });
});

不是100%关于如何实现它，但是你可以使用prototype事件监听器。我曾经尝试挂钩在Magento的表单验证一次之前，为了停止多个表单提交，代码类似于什么是下面，但我已经改变了一点，以适应您的要求:

new Event.observe('contactForm', 'keyup', function(e){
    e.stop();
    if(contactForm.validator && !contactForm.validator.validate()) {
        //do something here because it failed validation
        return;
    }

});
相关文章：