Multi Step Form JavaScript Validation to prevent proceeding to other steps - php

Question

The Problem
I created a multi step form, and yes the javascript and all is already functional but i have this one problem. also the user has 2 options of navigating trough the form, either using the next button or directly clicking the steps at the header. let's say the user has a form with 3 groups, ergo he has 3 steps. In my code he can't move to step 2 when he is currently in step 1 and required fields are empty, same applies with the next button. now the problem is that if he is in step 1 and he clicks step 3 he is able to proceed to it even though there are required fields that are empty in between them. I am already at lost on how do I trap this bug.
The Format of the groups
The groups are divided by table ergo 1 group is under 1 table.
How I formatted my JS
I formatted my JS by passing 3 values to it. the first value is the current category name, the second is the category list, the third is the next category after the current.
The first value is used to check whether all the required fields are filled before moving to the next step, the array is there to hide all other categories except the third value "this is done when the user clicks the next step", while the third value is used for displaying the next step.
Preview
http://screencast.com/t/QwSVFolb
The HTML
<li>step1</li>
<li>step2</li>
<li>step3</li>
<table id ="cat1"></table>
<table id ="cat2"></table>
<table id ="cat3"></table>
The JS
function dispFields2(a, b, c)
{
var valid2;
var blanks2 = Array();
var email_reg2 = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
var myVal2 = $('#'+c).find('input.required').map(function() {
return $(this).val();
}).get().join(',');
var myTitle2 = $('#'+c).find('input.required').map(function() {
return $(this).attr("title");
}).get().join(',');
var error_form2 = myVal2.split(',');
var error_title2 = myTitle2.split(',');
var errorlength2 = error_form2.length;
for(x=0;x<errorlength2;x++)
{
if(error_form2[x] == '')
{
if(myVal2 == '')
{
valid2 = true;
}
else
{
blanks2[x] = "Required - "+error_title2[x];
valid2 = false;
}
}
else
{
if(error_title2[x] == 'Email')
{
if(email_reg2.test(String(error_form2[x]).toLowerCase())==false){
blanks2[x] = error_title2[x]+" - Should be valid email";
valid2 = false;
}
}
else
{
if(blanks2 == '')
{
valid2 = true;
}
}
}
}
var requiredS2 = blanks2.toString();
var nblank2 = requiredS2.split(',').join("\n");
if(valid2 != true)
{
alert("Please review:\n\n"+nblank2);
document.getElementById(c).style.display = "";
document.getElementById(a).style.display = "none";
}
else
{
var ssplit = b.split(',');
var fieldlength = ssplit.length;
var limit;
for(i=0;i<fieldlength;i++)
{
if(a == ssplit[i])
{
limit = 1 + i;
document.getElementById(a).style.display = "";
document.getElementById("tcont").style.display = "";
document.getElementById(i).style.color = "#FF7300";
if(limit == fieldlength)
{
document.getElementById("tbutton").style.display = "";
}
else
{
document.getElementById("tbutton").style.display = "none";
}
}
else
{
document.getElementById(ssplit[i]).style.display = "none";
document.getElementById(ssplit[i]).style.color = "";
document.getElementById(i).style.color = "";
}
}
if(a == "default")
{
document.getElementById("captchas").style.display = "";
}
else
{
document.getElementById("captchas").style.display = "none";
}
}
}
Thank you.

Answer 1

Have the button for step 3 begin disabled, and only enable it when the user is on step 2. If the user moves back to step 1 from step 2, disable it again.