Question

I am working on multi-step registration form. For that I have created div with next-step button for each steps inside form tag as follows…

<form action="" method="POST">
<div class="registration_step_1 clearfix">
 /*few form fields here such as username, password etc.*/

  /*Button to proceed to next step*/
  <button class="redBtn right_part step_btn">Next</button>
</div>

<div class="registration_step_2 clearfix">
 /*few form fields here such as username, password etc.*/

  /*Button to proceed to next step*/
  <button class="redBtn right_part step_btn">Next</button>
</div>

<div class="registration_step_3 clearfix">
 /*few form fields here such as username, password etc.*/

  /*Button to proceed to next step*/
  <button class="redBtn right_part step_btn">Next</button>
</div>


<div class="registration_step_4 clearfix">
 /*few form fields here such as username, password etc.*/

  /*Button to proceed to next step*/
  <button class="redBtn right_part step_btn">Next</button>
</div>

<div class="registration_step_final clearfix">
<input type="submit" value="Register" class="redBtn round-button">
</div>

</form>

I am using Position absolute form validation engine.

We can trigger validation as follows:
jQuery(“#formID”).validationEngine();

The problem is each step can have few fields that are required. For handing wizard initially, I am showing only first step and display:none other divs. But in this case when all required fields of step 1 is filed the form is getting submitted to server.

Anyone, please suggest how to handle this situation. Ideally when all required fields of particular steps are filled out, it should go to next step and should not submit and vice versa.

Thanks for all your time.

Answer 1

Prevent the form from submitting after each button with javascript ( here jQuery) :

jQuery(".registration_step_1").click(function() { /*some code */ return false; } );