jQuery Подтвердить формы по разделам

Question

Я пытаюсь использовать проверку jQuery для проверки большой формы, которую я разрезал в 3 разных разделах.

1. личная информация
2. работа информация
3. дополнительная информация

есть способ для меня, чтобы проверить содержимое каждый раз, когда пользователь нажимает продолжить? а затем, когда они доберутся до последнего раздела, они могут отправить форму ENTIRE?

форма

<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 проверяет, проверяет всю форму, но я никогда не видел, чтобы это делали разделы без разбиения на три разные формы.

Спасибо за помощь ...

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

благодарит за посоветуйте каждого ...