jQuery 使用 onclick 处理程序验证而不是验证字段？

Question

我想使用 onlick 事件处理程序来使用 jquery Validate 验证某些表单字段。为此，我有以下代码：

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

我注意到只有一个事件处理程序根据首先单击的那个计算出这两个事件处理程序，即如果我单击带有 class js-add-names 的按钮，则该处理程序的验证按预期工作。

现在，如果我点击带有 class js-add-ages 的按钮，之前点击了 js-add-names，那么 js-add-age 的处理程序不起作用，反之亦然？

知道为什么会发生这种情况吗？解决方法是什么？

* 更新 *

根据 Sparky 的建议，我重写了如下代码，但现在当我单击 js-add-names 时，该处理程序的验证按预期工作

现在，如果我点击带有 class 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

Any ideas why this is happening and what is the fix?

.validate() 方法仅用于初始化表单上的插件，因此在加载页面时只应调用一次。随后的调用总是被忽略。因此，当您使用一个 click 处理程序时，您会初始化验证插件，而在另一个 click 处理程序中对 .validate() 的另一个调用将不执行任何操作。

修复...

调用 .validate() 一次以初始化表单上的插件。
不要从 click 处理程序调用 .validate()，因为这不是测试方法；只是初始化方法
使用插件的内置 submitHandler 和 invalidHandler 函数来处理表单有效和无效时需要执行的操作。
既然您似乎在使用 click 处理程序将 fields/rules 添加到现有表单，那么请使用 the .rules('add') and .rules('remove') methods 动态添加和删除任何规则。

jQuery 使用 onclick 处理程序验证而不是验证字段？

jQuery Validate using onclick handler not validating fields?

javascript

jquery

jquery-validate