1

いくつかのフォームを含む php ページがあります。全部で約 9 ですが、簡潔にするために、私の例では 4 のみを反映しています。最終的に、フォーム上でクリックされたボタンに応じて要素 ID を正常に検索するコードを取得し、URL がフォームに正しく追加されているかどうかを検証します。そうでない場合は、エラー メッセージを表示して入力を強調表示します ( span タグの div の下部にあるエラー メッセージをサポートします. コードはうまく機能し、必要に応じて誰でも使用できます. 要約するのに助けが必要です. Switch をかさばらないようにする方法はありますか?

===HTML の例 (1 ページに複数あります) ===

<div class="thumbnail">

    <form id="buyMe" action="#" method="post">
            <input type="hidden" name="none" value="#">
            <input type="hidden" name="#">
        <table id="myTable">
            <tr><td><select id="select" name="os0">
                    <option value="opt1">option 1</option>
                    <option value="opt2">Option 2</option>
                    <option value="opt3">Option 3</option>
                    <option value="opt4">Option 4</option>
                </select> 
            </td></tr>
            <tr><td><input type="hidden" id="on1" name="on1" value="This Title">This One Title</td></tr>
            <tr><td><input id="os1" type="text" value="http://" name="urlText" maxlength="200"></td></tr>
        </table>
            <input type="hidden" name="something" value="something">
            <button alt="tryThis" id="purchase1" name="submit" class="btn" type="image">Try This</button>
            <img alt="" border="0" src="pixel.gif" width="1" height="1">
    </form>
    <span id="msgsText1">Error Msgs appear here</span>
</div> 

=== JQuery スイッチ/ケース ==

    //BEGINNING OF SWITCH CODE
    emptyerror2 = "Please enter a valid URL";
    htmlEmpty = "Please use the proper URL format";
    success2 = "Added to cart successfully!";

$(' :button').click(function (e) {
    var btns = ["purchase1", "purchase2", "purchase3", "purchase4"];
    for (var i = 0, ii = btns.length; i < ii; i++) {
        var aTc = btns[i];
        var whatSpan = $(this).parent('#buyMe').nextAll('span').eq(0).attr('id');
        var msgSpan = $('#'+ whatSpan);
        var whoseInput = $(this).siblings('#myTable').find(':input').eq(2).attr('id');
        var myInput = $('#'+ whoseInput);
        if ((e.target || e.srcElement).id == aTc) {
            switch (aTc) {
                case 'purchase1':
                            if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            } // end of if else
                        break;
                case 'purchase2':
                            if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            } // end of if else
                        break;
                case 'purchase3':
                            if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            } // end of if else
                        break;
                case 'purchase4':
    if (!/(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(myInput.val())) {
                            myInput.addClass("errorAlert");
                            myInput.val(emptyerror2);
                            msgSpan.addClass("text-error");
                            msgSpan.html(htmlEmpty);
                            return false;
                            } else {
                            myInput.removeClass("errorAlert");
                            msgSpan.removeClass("text-error");
                            msgSpan.addClass("text-success");
                            msgSpan.html(success2);
                            return true;
                            } // end of if else
                        break;
               }//end of switch
            } //end of if
        } // end of for loop
    }); //end of button event code
4

2 に答える 2