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

Question

问题
我创建了一个多步骤表单，是的，javascript 和所有内容都已经可以正常工作，但我遇到了这个问题。用户还可以通过两种方式浏览表单，即使用“下一步”按钮或直接单击标题处的步骤。假设用户有一个包含 3 个组的表单，因此他有 3 个步骤。在我的代码中，当他当前处于步骤 1 并且必填字段为空时，他无法移至步骤 2，同样适用于下一个按钮。现在的问题是，如果他在步骤 1 中并单击步骤 3，即使它们之间有空白的必填字段，他也能够继续执行该步骤。我已经不知道如何捕获这个错误了。

组的格式
各组按 table 划分，因此 1 组位于 1 张 table 下。

我如何格式化我的 JS
我通过向 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 步，请再次禁用它。