使用 jQuery Validate 一次检查表单的各个部分

Question

我试图弄清楚如何将 jquery validate 合并到我的问卷调查表中。表单本身被分成隐藏的部分（div），并使用 jquery 上下滑动。这样，我可以出于各种原因将大型表单填充到单个页面中，并且仍然保持干净（左右）。问题是我无法弄清楚如何将 jquery 合并到表单中，以便在切换到下一部分之前一次仅验证部分或某些字段。

这是一些非常基本的代码，说明了表单

<script>
$(document).ready(function(){
    $(".go_section2").click(function(){
        // need to validate section 1 fields here or stop section jump
        $("#section2").slideDown("slow");
    });
    $(".go_section3").click(function(){
        // need to validate section 3 fields here or stop section jump
        $("#section3").slideDown("slow");
    });
    // etc...
});
</script>
<form name="theForm" id="theForm" class="theForm" method="POST" action="">
    <!-- Section 1 -->
    <div class="questionnaireHeader">Section 1 Header</div>
    <div id="section1" class="questionnaireSection">
        <label for="FirstName">First Name</label>
        <input id="FirstName" name="FirstName"/><br />
        <label for="LastName">Last Name</label>
        <input id="LastName" name="LastName"/><br />
        [form fields for section 1]<br />
        <span class="go_section2">next</span>
    </div>
    <!-- Section 2 -->
    <div class="questionnaireHeader">Section 2 Header</div>
    <div id="section2" class="questionnaireSection" style="display:none;">
        [form fields for section 2]
    </div>
    <!-- Section 3 thru x -->
</form>

所以应该发生的是，当用户单击第 1 部分中的“下一步”时，它将验证名字和姓氏都有值..（规则本身我应该能够设置）然后执行切换。如果任何字段无效，我希望输入/填充为红色或类似的效果。如果一切都经过验证，那么它会继续并显示下一部分，该部分本身将仅验证它自己的部分，依此类推。

我很感谢可以提供的任何帮助，我一直在研究示例，但还没有能够使任何工作发挥作用。

Answer 1

使用这个：

      $(".go_section2").click(function(){
        if($(this).find('input:text').val()!==""&&$(this).find('input:text').val()!==null){
        $("#section2").slideDown("slow");
}
else{
$(this).find('input:text').css('border','1px solid red');
}
    });

并确保将 type="text" 添加到文本输入中

Answer 2

最终使用了我在 jQuery 论坛上找到的类似内容

$("#buttonNext").click(function(){
  //apply/remove ignore rules here
   if $("form").valid()
     //hide current step and display next step
   return false; // do not submit
  });

//On your submit button
$("#submitButton").click(function(){
    // remove all ignore if required
   $("form").submit();
});