如何在鍵入時驗證Magento Javascript中的表單

Question

Magento有很棒的Javascript驗證庫，可以初始化var myForm= new VarienForm('[your form id]', true); 。 但是，單擊“提交”按鈕時會觸發此驗證功能。

在您鍵入時無法驗證特定字段。 例如，如果我輸入郵政編碼2位數並轉到第二個字段，它應該立即驗證郵政編碼並顯示錯誤。 郵政編碼需要至少5位數。

謝謝

Answer 1

是的，Magento提供了很棒的驗證庫。 您可以使用“validate”方法為每個字段調用驗證。

例如，要驗證郵政編碼，您可以觀察模糊事件並調用validate方法。

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

注意Validation.validate($('billing:postcode')) ，這將調用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>

有關更多信息，請點擊此鏈接 。

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


});