множественным шаг проверки формы JQuery

Question

я после нескольких ступенчатой ​​формы,

<form id="msform"> 
     <!-- progressbar --> 
     <ul id="progressbar"> 
      <li class="active">Account Setup</li> 
      <li>Social Profiles</li> 
      <li>Personal Details</li> 
     </ul> 
     <!-- fieldsets --> 

     <fieldset id="form_1"> 
       <h2 class="fs-title">Personal Details</h2> 
      <h3 class="fs-subtitle">Step 1</h3> 
      <input type="text" name="firstname" placeholder="First Name" /> 
      <input type="text" name="lastname" placeholder="Last Name" /> 
      <input type="text" name="email" id="email" placeholder="Email Address" /> 
      <input type="button" name="next" id="next_btn1" class="next action-button" value="Next" /> 
     </fieldset> 
     <fieldset id="form_2"> 
      <h2 class="fs-title">More Details</h2> 
      <h3 class="fs-subtitle">Step 2</h3> 
      <input type="text" name="Phone" placeholder="Phone" /> 
      <input type="text" id="dob" name="DOB" placeholder="Date of Birth" /> 
      <input type="text" name="gender" placeholder="Gender" /> 
      <input type="button" name="previous" class="previous action-button" value="Previous" /> 
      <input type="button" name="next" class="next action-button" value="Next" /> 
     </fieldset> 
     <fieldset id="form_3"> 
      <h2 class="fs-title">Create Your Account</h2> 
      <h3 class="fs-subtitle">Step 3</h3> 
      <input type="text" name="username" id="username" placeholder="UserName" /> 
      <input type="password" name="password" placeholder="password" /> 
      <input type="password" name="passwordR" placeholder="Confirm Password" /> 
      <input type="button" name="previous" class="previous action-button" value="Previous" /> 
      <input type="submit" name="submit" class="submit action-button" value="Submit" /> 

       </fieldset> 
    </form> 

Я хочу добавить Jquery валидаций используя плагин проверки для этой формы. Если проверки действительны, то можно перейти только к следующему шагу, и если перейти к значениям полей предыдущего шага сброса. Вот JQuery код,

var current_fs, next_fs, previous_fs; 
var left, opacity, scale; 
var animating; 

$(".next").click(function(){ 
    if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    next_fs = $(this).parent().next(); 

    //activate next step on progressbar using the index of next_fs 
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); 

    //show the next fieldset 
    next_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale current_fs down to 80% 
      scale = 1 - (1 - now) * 0.2; 
      //2. bring next_fs from the right(50%) 
      left = (now * 50)+"%"; 
      //3. increase opacity of next_fs to 1 as it moves in 
      opacity = 1 - now; 
      current_fs.css({'transform': 'scale('+scale+')'}); 
      next_fs.css({'left': left, 'opacity': opacity}); 
     }, 
     duration: 800, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
}); 

$(".previous").click(function(){ 
    if(animating) return false; 
    animating = true; 

    current_fs = $(this).parent(); 
    previous_fs = $(this).parent().prev(); 

    //de-activate current step on progressbar 
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); 

    //show the previous fieldset 
    previous_fs.show(); 
    //hide the current fieldset with style 
    current_fs.animate({opacity: 0}, { 
     step: function(now, mx) { 
      //as the opacity of current_fs reduces to 0 - stored in "now" 
      //1. scale previous_fs from 80% to 100% 
      scale = 0.8 + (1 - now) * 0.2; 
      //2. take current_fs to the right(50%) - from 0% 
      left = ((1-now) * 50)+"%"; 
      //3. increase opacity of previous_fs to 1 as it moves in 
      opacity = 1 - now; 
      current_fs.css({'left': left}); 
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); 
     }, 
     duration: 800, 
     complete: function(){ 
      current_fs.hide(); 
      animating = false; 
     }, 
     //this comes from the custom easing plugin 
     easing: 'easeInOutBack' 
    }); 
}); 

$(".submit").click(function(){ 
    return false; 
}) 

Вот демо - http://codepen.io/atakan/pen/gqbIz

Answer 1

Вы можете попробовать это Java-проект, который я написал, что можно найти по адресу:

https://www.npmjs.com/package/multi-step-form-js

или

https://github.com/mgildea/Multi-Step-Form-Js

Все, что вам нужно сделать, это поместить каждый шаг формы в divs с соответствующими классами, как описано в README, и вызвать функцию javascript на объекте формы:

$ (". Msf: first"). MultiStepForm();

Это будет использовать ненавязчивую проверку jquery или вы можете передать объект проверки в качестве параметра для использования проверки jquery без ненавязчивого проекта.

Каждый шаг будет проверен с помощью проверки jquery перед переходом к следующему шагу.