Question

我正在尝试使用jQuery验证来验证我在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'});
    }
});

感谢大家的建议......

jQuery按部分验证表单

2 个答案: