0

問題
マルチステップフォームを作成しました。はい、javascript とすべてが既に機能していますが、この 1 つの問題があります。また、ユーザーは次のボタンを使用するか、ヘッダーのステップを直接クリックするかの 2 つの方法でフォームをナビゲートできます。ユーザーが 3 つのグループを持つフォームを持っているとしましょう。したがって、ユーザーには 3 つのステップがあります。私のコードでは、彼が現在ステップ 1 にいて、必須フィールドが空の場合、ステップ 2 に移動できません。次のボタンにも同じことが当てはまります。ここでの問題は、ステップ 1 でステップ 3 をクリックすると、その間に空の必須フィールドがあるにもかかわらず、ステップ 3 に進むことができることです。このバグをどのようにトラップするかについて、私はすでに途方に暮れています。

グループの形式
グループはテーブルごとに分割されているため、1 つのグループは 1 つのテーブルの下にあります。

JS のフォーマット方法
3 つの値を渡して JS をフォーマットしました。最初の値は現在のカテゴリ名、2 番目はカテゴリ リスト、3 番目は現在のカテゴリの次のカテゴリです。

最初の値は、次のステップに進む前にすべての必須フィールドが入力されているかどうかを確認するために使用されます。配列は、「ユーザーが次のステップをクリックすると実行される」という 3 番目の値を除く他のすべてのカテゴリを非表示にするために使用されます。値は、次のステップを表示するために使用されます。

プレビュー 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";             
                            }
                }       
        }

ありがとうございました。

4

1 に答える 1

2

ステップ 3 のボタンを最初から無効にし、ユーザーがステップ 2 を実行しているときにのみ有効にします。ユーザーがステップ 2 からステップ 1 に戻った場合は、再度無効にします。

于 2012-05-17T17:00:16.587 に答える