jquery - JQUERY - コード構造でチェックボックス/ラジオを検証/チェックするにはどうすればよいですか?

Question

私はこれを必要以上に悪化させ、困難にしていますが、これを理解することはできません。

作業中の特別なクライアントアプリ用のカスタム検証コーディングが必要なため、jquery val プラグインを使用できません

私が欲しいのは、テキストフィールドの検証と基本的に同じように構築されたチェックボックスとラジオ検証機能だけです。チェックボックスとラジオの検証用のコードが非常に悪く、元々機能していたテキストフィールドの検証が壊れてしまいました

私が持っていた機能しないコードの災害を取り除きました-これを機能させる方法を教えてください。

私のjsfiddle/belowでコード構造を使用する：「btnCatchReqFlds」ボタンをクリックすると、テキストフィールドチェックを実行してから、チェックボックス、ラジオチェックを実行し、必須であるが入力されていないフィールドをすべて表示します/チェック/選択。

jsfiddleを見ると、テキストフィールドの検証だけでどのように機能するかがわかります。同じ機能を組み込む/チェックボックス/ラジオボタンでチェックするだけです。

私は近くにいると思います。コードを更新しましたが、これが優れたコーディングではないことはわかっていますが、必要なものを取得するために赤ちゃんのステップを踏んでいます。以下のコードは、必須だが空のテキストとチェック/ラジオフィールドをチェックします。問題は、コードが正しいフィールドを取得することですが、「.not(':checked');」正常に動作していません。ラジオ/チェックボックスのいずれかをオンにすると、同じ戻り値が返されます。私はこれで何が間違っていますか：return $(this).not(':checked');

私のjsfiddle：

jquery:

$("#btnCatchReqFlds").on('click', function()  
{
    $("#holdErrMsg").empty();
    $("#holdErrMsg_checkRadios").empty();
    var requiredButEmpty = $("fieldset:visible").find('input[class*="-required"], select[class*="-required"]').filter(function() 
            {
                return $.trim($(this).val()) === "";  
            });
    var chk_requiredButEmpty = $("fieldset:visible").find(":input:checkbox[class*='-required'],:input:radio[class*='-required']").filter(function()
            {
                return $(this).not(':checked');
            });
    if (requiredButEmpty.length) 
        {
            requiredButEmpty.each(function () 
                {
                    $("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
                });
        }
    if (chk_requiredButEmpty.length) 
    {
        chk_requiredButEmpty.each(function () 
            {
                $("#holdErrMsg_checkRadios").append("Please fill in the " + this.name + "<br />");
            });
    }
    return !requiredButEmpty.length;
    return !chk_requiredButEmpty.length;
});

HTML :

<form method="post" action="">
    <div id="holdErrMsg"></div>
    <div id="holdErrMsg_checkRadios"></div>
    <fieldset id="mainSection" name="mainSection">
        <legend style="color:blue; font-weight:bold">Project Overview Section</legend>
        <table style="width: 100%">
            <tr>
                <td style="height: 33px; width: 178px;">Name<span style="color: red">*</span></td>
                <td style="height: 33px"><input id="1125" name="1125" class="1125-required" type="text" /> - 1125</td>
            </tr>
            <tr>
                <td style="height: 33px; width: 178px;">Email<span style="color: red">*</span></td>
                <td style="height: 33px"><input id="1026" name="1026" class="1026-required" type="text" /> - 1126</td>
            </tr>
            <tr>
                <td style="width: 178px">Product Title</td>
                <td><input id="1089" name="1089" type="text" /></td>
            </tr>
            <tr>
                <td style="width: 178px">Product Type</td>
                <td>
                    <select id="1169" name="1169">
                        <option value="">Select</option>
                        <option value="Cars">Cars</option>
                        <option value="Boats">Boats</option>
                        <option value="Planes">Planes</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <button id="btnCatchReqFlds" type="button" name="btn">Check Required Fields</button>
                </td>
            </tr>
        </table>
    </fieldset>
    <!-- Car Section  -->
    <fieldset id="section-11" name="section-11">
        <legend style="color:fuchsia; font-weight:bold">Car Details Section</legend>
        <table cellpadding="2" style="width: 100%">
            <tr>
                <td style="width: 334px; height: 35px"><label>Size:<span style="color: red">*</span></label></td>
                <td style="height: 35px"><input id="1245" class="1245-required" name="1245" type="text" /> - 1245</td>
            </tr>
            <tr>
                <td style="height: 35px; width: 334px">Color:<span style="color: red">*</span></td>
                <td style="height: 35px">
                    <select id="1433" class="1433-required" name="1433">
                        <option value="">Select</option>
                        <option value="Orange">Orange</option>
                        <option value="Blank">Blank</option>
                        <option value="Green">Green</option>
                    </select>
                    - 1433
                </td>
            </tr>
            <tr>
                <td style="width: 334px">Description:</td>
                <td>
                    <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea>
                </td>
            </tr>
        </table>
    </fieldset>
    <!-- Plane Section  -->
    <fieldset id="section-12" name="section-12">
        <legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend>
        <table cellpadding="2" style="width: 100%">
            <tr>
                <td style="width: 334px; height: 35px"><label>Size:</label></td>
                <td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
            </tr>
            <tr>
                <td style="height: 35px; width: 334px">Color<span style="color: red">*</span>:</td>
                <td style="height: 35px">
                    <input type="checkbox" name="1433[]" id="1433[]" value"Orange" class="1433[]-required" />Orange
                    <input type="checkbox" name="1433[]" id="1433[]" value"Blue" class="1433[]-required" />Blue
                    <input type="checkbox" name="1433[]" id="1433[]" value"Green" class="1433[]-required" />Green
                    |  1302
                </td>
            </tr>
            <tr>
                <td style="width: 334px">Description:</td>
                <td>
                    <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea>
                </td>
            </tr>
        </table>
    </fieldset>
    <!-- Boat Section  -->
    <fieldset id="section-13" name="section-13">
        <legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend>
        <table cellpadding="2" style="width: 100%">
            <tr>
                <td style="width: 334px; height: 35px"><label>Size:</label></td>
                <td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
            </tr>
            <tr>
                <td style="height: 35px; width: 334px">Color:<span style="color: red">*</span></td>
                <td style="height: 35px">
                    <input type="radio" name="1834" id="1834" value="None" class="valuetext 1834-required" />None
                    <input type="radio" name="1834" id="1834" value="All" class="valuetext 1834-required" />All
                    - 1834
                </td>
            </tr>
            <tr>
                <td style="width: 334px">Description:</td>
                <td>
                    <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea>
                </td>
            </tr>
        </table>
    </fieldset>
    <br />
    <!-- Misc. Info Section  -->
    <fieldset id="section-1011" name="section-1011">
        <legend style="color:green; font-weight:bold">Misc. Info Section</legend>
        <table cellpadding="2" style="width: 100%">
            <tr>
                <td style="width: 334px; height: 35px"><label>Size:</label></td>
                <td style="height: 35px"><input id="1301" name="1301" type="text" /></td>
            </tr>
            <tr>
                <td style="height: 35px; width: 334px">Color:</td>
                <td style="height: 35px">
                    <select id="1302" name="1302">
                        <option value="Orange">Orange</option>
                        <option value="Blank">Blank</option>
                        <option value="Green">Green</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="width: 334px">Description:</td>
                <td>
                    <textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea>
                </td>
            </tr>
        </table>
    </fieldset>
</form>

score 0 · Accepted Answer

最近の更新では、すべての兄弟がチェックされているかどうかをチェックしてから、変数に返す要素の配列から1つを取得するだけです。エラーメッセージの追加を開始する前に以下のコードを挿入すると、希望どおりに機能するはずです。更新されたフィドルはこちらhttp://jsfiddle.net/mPXAw/7/

var chk_requiredButEmpty = $("fieldset:visible").find(":checkbox[class*='-required'],:radio[class*='-required']").filter(function()
{
       if(!$(this).siblings().is(':checked')){
               return !$(this).is(':checked');
       }
});
chk_requiredButEmpty = chk_requiredButEmpty.eq(0);

score 0 · Accepted Answer

私はこれで何が間違っていますか：return $(this).not(':checked');

.notはの逆であると想定していますが.is、そうではありません。.notブール値を返さず、セレクタに一致しない要素を含む jQuery オブジェクトを返します。

あなたは単に使用する必要があります：

!$(this).is(":checked")

何かがチェックされていないかどうかを判断します。またはさらに良い：

!this.checked

更新されたフィドル: http://jsfiddle.net/VSx6M/

その他の注意事項:

returnイベントハンドラーの最後に2 つのステートメントがあります。return2 つ目は、プログラムフローをすぐに呼び出し元の関数に戻すため、到達できません。
よりも配列リテラル ( []) 表記の方が優先されnew Arrayます。
ラジオボタングループを考慮していないため、ラジオボタンが複数回検証されています。これにより、すべてのラジオボタンが必須とマークされているため、ラジオボタンに無効のフラグが立てられます。

^{*jQuery 検証を使用できないことはわかっていますが、試してみることを強くお勧めします。}

jquery - JQUERY - コード構造でチェックボックス/ラジオを検証/チェックするにはどうすればよいですか?

2 に答える 2

Related

Reference