jQuery按节验证表单

Question

我正在尝试使用jQuery验证来验证我在三个不同部分中剪切的一个大表单。

1. 个人信息
2. 作业信息
3. 补充资料

是否有一种方法可以在用户每次点击继续时验证内容？当他们到达最后一节时，他们就可以提交整个表格了？

表格

<form  method="post" name="form" id="form" class="form">
   <div class="section_one form-wrapper-top-margin active">
     <div class="columns-2 float-left">
       <input name="name" id="name" type="text" class="" value=""/>
     </div>

    <div class="columns-2 float-right margin-0">
      <input name="email" id="email" type="text" class="" value=""/>
    </div>

    <div class="columns-2 float-right margin-0">
      <input name="button" type="button" value="Continue" id="btn_1"/>
    </div>
 </div>

 <div class="section_two form-wrapper-top-margin">
   <div class="columns-1 margin-0">
     <input name="address" id="address" type="text" class="" value=""/>
   </div>

  <div class="columns-1 margin-0">
   <textarea name="description" id="description"  type="text" class=""></textarea>
 </div>

 <div class="columns-2 float-right margin-0">
    <input name="button" type="button" value="Continue" id="btn_2"/>
 </div>
 </div>
 <div class="section_there form-wrapper-top-margin">
 <div class="columns-1 margin-0">
      <textarea name="description" id="description"  type="text" class=""></textarea>
 </div>

 <div class="columns-2 float-right margin-0">
    <input name="submit" type="submit" id="submitbtn" value="Send your message"/>
  </div>
  </div>
  </div>
 </div>    
 </form>

我没有把jQuery代码放在这里，因为我不知道从哪里开始。我知道jQuery验证，验证了整个表单，但我从未见过将其拆分为3种不同形式的部分。

谢谢你的帮助..。

Answer 1

你也可以这样做：-

 $(".section_two").click(function(){

 //Your code for validation of  section one.
 });

 $(".section_three").click(function(){
 //Your code for validation of section one and section two.
 });

 $("#submitbtn").click(function(){
   //Your code for validation of section three.
 });

如果这有帮助的话请告诉我。

Answer 2

我在这里找到了答案：

jQuery button validate part of a form at a time

这是我使用的代码

var validator = $('#form').validate({
    ignore: 'input.continue,input#submitbtn',
    rules: {
        name: {
            required: true
        },
        email: {
            required : true
        },
        date: {
            required: true
        },

    },
    messages: {
        name: "Enter your name",
        email: {
            require: "Please enter a valid email address",
            email: "Enter a valid email"
        },

    },

    errorPlacement: function(error, element) { },

});

$('#continue1').on('click', function(){
    var tab = $(".section_one.active");
    var sec1 = $('.inner_section_container');
    var valid = true;

    $('input', tab).each(function(i, v){
        valid = validator.element(v) && valid;
    });

    if(!valid){
        return;
    }else{
        $('.inner_section_container').animate({'left':'-1080px'});
    }
}); 



$('#continue2').on('click', function(){
    var tab = $(".section_two.active");
    var sec1 = $('.inner_section_container');
    var valid = true;

    $('input', tab).each(function(i, v){
        valid = validator.element(v) && valid;
    });

    if(!valid){
        return;
    }else{
        $('.inner_section_container').animate({'left':'-2160px'});
    }
}); 

谢谢大家的建议..。