多步表单JavaScript验证，以防止继续执行其他步骤

Question

问题
我创建了一个多步骤表单，是的javascript和所有已经功能，但我有这个问题。用户还可以通过下一个按钮或直接单击标题中的步骤，通过表单导航两个选项。假设用户有一个包含3组的表格，他有3个步骤。在我的代码中，当他当前处于步骤1并且必填字段为空时，他无法移至步骤2，同样适用于下一个按钮。现在的问题是，如果他在步骤1中并且他点击了步骤3，即使在它们之间存在必需的字段，他也可以继续进行。我已经迷失了如何捕获这个错误。

组的格式
这些组按表格划分，1组在1表下。

我如何格式化我的JS
我通过传递3个值来格式化我的JS。第一个值是当前类别名称，第二个是类别列表，第三个是当前类别之后的下一个类别。

第一个值用于检查在移动到下一步之前是否已填充所有必填字段，该数组用于隐藏除第三个值以外的所有其他类别“这是在用户单击下一步时完成的”，而第三个值用于显示下一步。

预览的 http://screencast.com/t/QwSVFolb

HTML

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

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";             
                            }
                }       
        }   

谢谢。

Answer 1

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