Question

我正在试图弄清楚如何将jquery validate合并到我的问卷表单中。表单本身被分解为隐藏的部分（div），并使用jquery上下滑动。这样我可以出于各种原因将大型表单填充到单个页面中并且仍然保持干净（ish）。问题是我无法弄清楚如何将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部分中的“next”时，它将验证firstname和lastname都有值..（规则本身我应该能够设置），然后执行切换。如果任何字段无效，我希望输入/填充红色或某些此类效果。如果一切都有效，那么它会继续显示下一个部分，它本身将仅验证它自己的部分，依此类推等等。

我感谢任何可以提供的帮助，我一直在通过示例，并且还没有做任何工作。

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();
});

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

2 个答案: