使用jquery驗證二級表單驗證

我在一個頁面上有兩個表單（在http://www.bumblebeezflorist.com/上將產品添加到您的購物籃中）。你可以在這裏看到小提琴：使用jquery驗證二級表單驗證

如果你有交付估計，我想驗證某個人單擊Checkout鏈接之前已經輸入。

由於我已經有網站上的jquery驗證庫，我打算使用它。到目前爲止，我有：

if($('#cartForm').length > 0) { 
    $('#proceedCheckout').on('click', function (event) { 
     console.log('HSA'); 
     $('#changeCountry').validate({ 
      errorClass: 'alert-error' 
     }); 
     event.preventDefault(); 
    }); 
}

驗證工作正常，如果你標籤出來的郵政編碼場的，但如果你點擊結帳按鈕，驗證不火。我怎樣才能做到這一點？

非常感謝

來源

2013-02-07 Jeepstone

您的代碼：

if($('#cartForm').length > 0) { 
    $('#proceedCheckout').on('click', function (event) { 
     console.log('HSA'); 
     $('#changeCountry').validate({ // <-- move out of here 
      errorClass: 'alert-error' 
     }); 
     event.preventDefault(); // <-- should always be first in a function 
    }); 
}

.validate()應該被用來初始化窗體上的插件（及其選項）在DOM準備就緒。由於每次點擊都會重新初始化，因此您會看到意外的行爲。

你也受到id瞄準#changeCountry在沒有id存在，所以我加了相應的id既form標籤。

無論何時您有兩個表單並且一個表單的提交取決於另一個表單的確認狀態，請使用the plugin's .valid() method來測試另一個表單。

嘗試更多的東西是這樣的：

$(document).ready(function() { 

    // call .validate() to initialize the plugin 
    $('#changeCountry').validate({ 
     errorClass: 'alert-error' 
    }); 

    // on click, test the form using .valid() 
    $('#proceedCheckout').on('click', function (event) { 
     event.preventDefault(); 
     if ($('#changeCountry').valid()) { 
      $('#cartForm').submit(); // passes validation 
     } else { 
      // failed validation 
     } 
    }); 

});

演示：在formhttp://jsfiddle.net/B9d8A/

$('#changeCountry').validate() initializes the validate plugin與id#changeCountry。

$('#changeCountry').valid() programmatically triggers an actual validation test並返回一個true/false布爾值。

完整文檔：

http://docs.jquery.com/Plugins/Validation

來源

2013-02-07 17:16:48 Sparky

優秀的答案！我錯過了有效的（）調用。愚蠢的事情真的很想念。我的小提琴缺少字段ID進一步複雜化。非常感謝你。 – Jeepstone

-1

爲什麼你有條件地將點擊事件添加到按鈕？

我想要在單擊事件內部進行測試，以免遇到正確分配給按鈕的單擊事件時出現任何問題。

$('#proceedCheckout').on('click', function (event) { 
    console.log('HSA'); 
    if($('#cartForm').length > 0) { 
    $('#changeCountry').validate({ errorClass: 'alert-error' }); 
    event.preventDefault(); 
    } 
});

來源

2013-02-07 16:17:57 Skeebo06

'.validate（）'爲_initializing_窗體上的插件;這不是爲了「測試」表單的當前狀態。 – Sparky

太好了，謝謝你的信息，以後可能對我有用。然而，.validate（）的作用與我的帖子完全無關，後者質疑將條件添加到#proceedCheckout的'click'事件背後的原因，b/c有條件添加事件通常是有問題的設計。 – Skeebo06

使用jquery驗證二級表單驗證

回答

相關問題