如何在键入时验证 Magento Javascript 中的表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24202463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to validate form in Magento Javascript as you type
提问by Elisa
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.
Magento 有很棒的 Javascript 验证库，可以初始化var myForm= new VarienForm('[your form id]', true);。但是，当单击提交按钮时会触发此验证功能。
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.
没有办法在您键入时验证特定字段。例如，如果我输入 2 位邮政编码并转到第二个字段，它应该立即验证邮政编码并显示错误。由于邮政编码至少需要 5 位数字。
thanks
谢谢
回答by Krishna Sunuwar
Yes, Magento provide awesome validation library. You can call validation for each field with `validate' method.
是的，Magento 提供了很棒的验证库。您可以使用“validate”方法为每个字段调用验证。
For example to validate zip code, you can observe blur event and call validatemethod.
例如要验证邮政编码，您可以观察模糊事件和调用validate方法。
$('billing:postcode').observe('change', function(e){
Validation.validate($('billing:postcode'))
})
Notice Validation.validate($('billing:postcode')), this will call validation for postcode field.
请注意Validation.validate($('billing:postcode'))，这将调用邮政编码字段的验证。
回答by aforankur
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
接下来，运行这段 javascript 将您的普通旧表单转换为 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)
然后，使用 Validation.add 方法将您的验证编写为 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>
For more info follow this link.
有关更多信息，请点击此链接。
回答by jmargolisvt
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 fieldsarray:
这里没有添加任何新内容，但如果您想通过剪切和粘贴快速方式为表单创建多个验证，只需添加到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))
});
});
回答by Eugene
You can write a custom validation class:
您可以编写自定义验证类：
Validation.add('validate-float','Error message',function(v){
return Validation.get('IsEmpty').test(v) || (!/\./.test(v));
});
回答by Karl
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:
不是 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;
}
});
