Question

e.g。假设我在表单中有两个文本框A，B和两个按钮C，D。然后我想点击按钮C，如果只有文本框A有效则表单有效，点击按钮D，如果只有文本框B有效则表单有效。

有谁知道怎么做？

Answer 1

使用忽略选项。

$("form").validate({ignore: ".ignore"});

$("#c").click(function(){
   //$("#a").removeClass("ignore");
   //$("#b").addClass("ignore");
   $(".step1").removeClass("ignore");
   $(".step2").addClass("ignore");
   $("form").valid();
});

$("#d").click(function(){
   //$("#a").addClass("ignore");
   //$("#b").removeClass("ignore");
   $(".step1").addClass("ignore");
   $(".step2").removeClass("ignore");
   $("form").valid();
});

编辑：正如我的评论@ dannie.f post

中所述

Answer 2

上述答案使我朝着正确的方向前进，但对我来说并不完全有效。如果您有很多字段，那么在按钮单击时为每个字段添加和删除类将非常繁琐。另外，您必须知道需要忽略的id或类别的字段。

这是我提出的解决方案。我使用div创建了验证组，并使用jquery ：not 选择器告诉验证者忽略该组中未包含的任何字段。

<html>
<head>
<script type="text/javascript">
   $(function(){
      section1Validator = $("#form1").validate(
        { ignore: ":not(#section1 *)" });

      section2Validator = $("#form1").validate(
        { ignore: ":not(#section2 *)" });

     $("#c").click(function(){
           if (section1Validator.form()) {
                // do something when form is valid
           }
      });

      $("#d").click(function(){
           if (section2Validator.form()) {
                // do something when form is valid
           }
      });
   })
</script>
</head>

<body>
<form id="form1">
   <div id="section1">
      <input id="a" name="a" type="text" class="required"/>
      <button id="c" type="buttom">submit</button>
   </div>
   <div id="section2">
      <input id="b" name="b" type="text" class="required"/>
      <button id="d" type="button">submit</button>
   </div>
</form>
</body>
</html>

通过JQuery Validate Plugin点击同一HTML表单中的不同按钮，验证不同的字段

2 个答案: