Question

Magento有很棒的Javascript验证库，可以初始化var myForm= new VarienForm('[your form id]', true);。但是，只需单击“提交”按钮即可触发此验证功能。

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

感谢

Answer 1

是的，Magento提供了很棒的验证库。您可以使用`validate＆＃39;为每个字段调用验证。方法

例如，要验证邮政编码，您可以观察模糊事件并调用validate方法。

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

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

Answer 2

首先，为您的表单创建。

<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.add方法将验证写为javascript函数。（验证是一个全局用于存储所有表单验证规则）

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

有关详细信息，请按此link。

Answer 3

您可以编写自定义验证类：

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

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

Answer 4

此处不添加任何新内容，但如果您希望剪切并粘贴快速方法为表单创建多个验证，只需添加到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))
    });
});

Answer 5

不是100％关于如何实现它，但您可以使用Prototypes事件监听器。为了阻止多次提交表单，我之前尝试过连接到Magento的表单验证，代码类似于下面的内容，但我已经改变了一下以适应你的要求：

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

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


});

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

5 个答案: