0

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

组的格式
组按表划分，因此 1 组在 1 个表下。

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

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

预览 http://screencast.com/t/QwSVVolb

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

谢谢你。

4

1 回答 1

2

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

于 2012-05-17T17:00:16.587 回答