jQuery驗證使用onclick處理程序不驗證字段？

Question

我想使用onlick事件處理程序來驗證一些使用jQuery驗證的表單字段。要做到這一點，我有以下代碼：

<input type="text" id="Name" name="Name"> 
<a class="btn btn-primary js-add-names" href="#">Add Names</a> 

<input type="text" id="Age" name="Age"> 
<a class="btn btn-primary js-add-ages" href="#">Add Age</a> 

<script> 


    $(".js-add-names").click(function (e) { 

    e.preventDefault(); 

    $("form").validate({ 
     rules: { 
      Name: { 
      required: true 
      } 
     }, 
     messages: { 
      Name: "The Name is required" 
     } 

    }); 

    if (!$("form").valid()) { 
     return; 
    } 

    // otherwise do stuff but we dont want to submit form 
    }); 


    $(".js-add-ages").click(function (e) { 

    e.preventDefault(); 

    $("form").validate({ 
     rules: { 
      Age: { 
      required: true 
      } 
     }, 
     messages: { 
      Age: "The Age is required" 
     } 

    }); 

    if (!$("form").valid()) { 
     return; 
    } 

    // otherwise do stuff but we dont want to submit form 
    }); 

</script> 

我已經注意到的是，只有一個事件處理工作了兩個基於被點擊哪一個第一，即如果我點擊帶班JS-添加 - 按鈕名稱，該處理程序的驗證按預期工作。

現在，如果我點擊類js-add-ages之前點擊過js-add-names的按鈕，那麼js-add-age的處理程序不起作用，反之亦然？

任何想法，爲什麼發生這種情況，什麼是修復？

---

* UPDATE *

繼建議由斯帕克我已經重新寫爲下面的代碼，但現在，當我點擊JS-插件名稱，該處理器的驗證按預期工作

現在，如果我點擊類js-add-ages之前點擊js-add-names的按鈕，則js-add-age的處理程序不起作用，因爲驗證之前已經爲輸入#Name添加了一條規則。每次事件處理程序啓動時，如何重置表單或刪除規則？

<form> 
    <input type="text" id="Name" name="Name"> 
    <a class="btn btn-primary js-add-names" href="#">Add Names</a> 

    <input type="text" id="Age" name="Age"> 
    <a class="btn btn-primary js-add-ages" href="#">Add Age</a> 

    // other inputs 
    <input type="checkbox" name="CarOwner" value="Yes"> Car owner 

    <input type="submit" value="Submit"> 
</form> 

<script> 

    $("form").validate(); 

    $(".js-add-names").click(function (e) { 

    e.preventDefault(); 

    $("#Age").rules("remove"); 

    $("#Name").rules("add", { 
     required: true, 
     messages: { 
      required: "The Name is required" 
     } 
    }); 

    if (!$("form").valid()) { 
     return; 
    } 

    // otherwise do stuff but we dont want to submit form 
    // ... 

    //Reset input field 
    $("#Name").val(''); 
    }); 


    $(".js-add-ages").click(function (e) { 

    e.preventDefault(); 

    $("#Name").rules("remove"); 

    $("#Age").rules("add", { 
     required: true, 
     messages: { 
      required: "The Age is required" 
     } 
    }); 

    if (!$("form").valid()) { 
     return; 
    } 

    // otherwise do stuff but we dont want to submit form 
    // ... 

    //Reset input field 
    $("#Age").val(''); 
    }); 

</script> 

Answer 1

任何想法，爲什麼發生這種情況，什麼是修復？

的.validate()方法僅用於初始化表單上的插件，因此只應調用一次當加載頁面。隨後的呼叫總是被忽略。因此，當您使用一個click處理程序時，您初始化驗證插件，另一個.validate()在其他click處理程序中將不會執行任何操作。

的修復...

1. 呼叫.validate()一次初始化表單上的插件。

2. 請勿從click處理程序調用.validate()，因爲這不是測試方法;它只是初始化方法。

3. 使用插件的內置submitHandler和invalidHandler函數來處理表單有效和無效時需要執行的操作。

4. 由於您似乎在使用您的click處理程序向現有表單添加字段/規則，因此請使用the .rules('add') and .rules('remove') methods動態添加和刪除任何規則。