Multi Step Form JavaScript Validation to prevent proceeding to other steps

Question

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 groups are divided by table ergo 1 group is under 1 table.

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.

http://screencast.com/t/QwSVFolb http://screencast.com/t/QwSVFolb

<li>step1</li>
<li>step2</li>
<li>step3</li>
<table id ="cat1"></table>
<table id ="cat2"></table>
<table id ="cat3"></table>

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

让步骤3的按钮开始禁用，并且仅在用户处于步骤2时启用它。如果用户从步骤2返回步骤1，则再次禁用它。