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>

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

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

任何想法为什么会发生这种情况以及解决方法是什么？

*更新*

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

现在，如果我单击带有js-add-ages类的按钮，之前点击了js-add-names，则js-add-age的处理程序不起作用，因为验证先前已为输入添加了规则＃名称。每次事件处理程序触发时，如何重置表单或删除规则？

<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插件，而另一个.validate()处理程序中对click的另一个调用将不执行任何操作。

修复......

致电.validate()一次以初始化表单上的插件。
不要从.validate()处理程序调用{{1}}，因为这不是测试方法;它只是初始化方法。
使用插件的内置click和submitHandler函数，以填写表单有效且无效时需要执行的操作。
由于您似乎正在使用invalidHandler处理程序向现有表单添加字段/规则，因此请使用the .rules('add') and .rules('remove') methods动态添加和删除任何规则。

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

1 个答案: