jQuery Validate forms by sections

Question

i am trying to use jQuery validate to validate a big form that i have cut in 3 different sections.

personal information
job information
additional information

is there a way for me to validate the content every time the user hits continue? and then when they get to the last section they can submit the ENTIRE form?

form

<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>

i dont put the jQuery code here because i dont know where to start. i know jQuery validate, validates an entire form, but i never seen it done by sections with out splitting it into 3 different forms.

Thanks for the help...

you can use slider here. Your continue button will be slide button. — HungryDB, Nov 28 '14 at 05:49
They are slider buttons, i just want the required fields to validate before the user can continue, i wanted to use jquery validate for that but i dont know if its possible — Hector, Nov 28 '14 at 05:57
JQuery validation is targeting ("form"), I suppose. If it allows (depends on loop that is triggered afterwards, you can take your parts into array/object and set them as validator target... If JQuery code would be provided here it would be easier to answer :) — nettutvikler, Nov 28 '14 at 06:07

score 1 · Answer 1 · answered Nov 28 '14 at 06:08

You can do like this also:-

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

Let me know if this helps.

score 1 · Answer 2 · edited May 23 '17 at 12:05

I found the answer here:

jQuery button validate part of a form at a time

this is the code i used

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

thanks for everyone's advise...

jQuery Validate forms by sections

2 Answers2