Validation form with multi step

[PA]

Hi,

Anyone l have a idea how to validate a form with mutli step ?

Example :

step 1

check input A B C

step 2

check input D E F

step 3

check input Y Z
Submit

[DoctorJ]

For now there is no way to validate just a part of a formular before
antoher.

But can you explain the reason you need this functionnality?

[PA]

Why choose 4 steps vs 1 step ? It is for the User experience.

User dont like form ( 1 Step ) with 40 inputs in generally. It better
use a form with 4 steps with 10 inputs by Step.

Example :

<form id="registration" >

<div id="step1">

<input type="text" id="first_name" />
<input type="text" id="last_name" />

<a href="#" id="valide_step_1">Next</a>

When we click on link#valide_step_1

We check if first_name and last_name are Validate

if True : ( hide div#valide_step_1 and show
div#valide_step_2 ) Step 1 Validate
if False : Display Error Messsage

</div>

<div id="step2">

<input type="text" id="city" />
<input type="text" id="state" />

<a href="#" id="back_step_1">Back</a>
<a href="#" id="valide_step_2">Next</a>

When we click on link#valide_step_2

We check if city and state are Validate

if True : ( hide div#valide_step_2 and show
div#valide_step_3 ) Step 2 Validate
if False : Display Error Messsage

When we click on link#back_step_1

Action : Hide div#valide_step_2 and show div#valide_step_1

</div>

<div id="step3">

<input type="text" id="phone" />
<input type="text" id="fax" />

<a href="#" id="back_step_1">Back</a>
<a href="#" id="valide_step_3_and_submit">Submit</a>

When we click on link#valide_step_3_and_submit

We check if phone and fax are Validate

if True : ( Submit Form ) Step 3 Validate
if False : Display Error Messsage

When we click on link#back_step_3

Action : Hide div#valide_step_3 and show div#valide_step_2

</div>

</form>

Note 1 : We can do this with jQuery plugin: Validation

Example :

//Validation rules 1st step
$("#valid_step_1").click(function()
{

$("#frm_sign").validate({
rules: {
company_name: "required",
business: "required",
contact_name: "required",
address: "required",
city: "required",
country: "required",
zip_postal_code: "required",
phone_number: "required",
email: { required: true, email: true },
confirm_email: { required: true, email: true, equalTo: "#email" }

}
});

if($("#frm_sign").valid())
{
$(".pg_setp_1").hide();
$(".pg_setp_2").show();
}

return false;
});

Note 2 : l am not really good in English Writting :/

[Muno]

This is exactly what I need.

Did you manage to solve the problem.

[Rolf Herbert]

Probably a dead forum this but I still use this class in Mootools.

For multi step forms what I do is add the form elements to the formcheck object using the register method and I wrote a small extra function within formcheck to perform a check on the form as a method that returns false (validated) or false (not validated).

Then;

attach onclick events to the next section buttons

use register to add all the form elements in that section that require validation using register

check the form true/false

if true I carry on and display the next section

if false i do nothing and the form errors are displayed.

/*

Function: checkNow

Private method

Perform check on any action action

*/

checkNow: function(event) {

this.reinitialize();

this.validations.each(function(el) {

var validation = this.manageError(el,'submit');

if(!validation) this.form.isValid = false;

}, this);

if (this.form.isValid) {

this.fireEvent('validateSuccess');

//moved above to allow optional settings to this.form.submit and submitByAjax to be triggered by this option

return true;

} else {

if (this.elementToRemove && this.elementToRemove != this.firstError && this.options.display.indicateErrors == 1) {

this.removeError(this.elementToRemove);

}

this.focusOnError(this.firstError);

this.fireEvent('validateFailure');

return false;

}

}