jquery - Jquery-表示されているフィールドセットで必要なフィールドを見つけてメッセージを表示する

Question

現在表示されているフィールドセット内にある、フォーム上のすべての必須フィールドを検索したいと思います。ユーザーがフォームを送信するときに実際にこのコードを使用しますが、テストでは、単純なボタンを使用して表示フィールドセットを確認し、次に必要な表示フィールドセット内のフィールドを確認します[ -requiredで終わるクラス名で示されます] 。これらのフィールドには、テキストボックス、ラジオ、チェックボックスなどがあります。次に、それらが空かどうかを判断します。空の場合は、divにメッセージを入力して、どのフィールドが完了していないかをユーザーに通知します。 このコードは別のstackOverflowerの助けを借りて理解したと思いましたが、私のコードでは機能しません。誰かがいくつかの洞察を提供できますか？

ここに私のフィドル：http： //jsfiddle.net/justmelat/jVktq/

ここに私のhtml：

<form method="post" action="">
    <div id="holdErrMsg"></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</td>
                        <td style="height: 33px"><input  id="1125" name="1125" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="height: 33px; width: 178px;">Email</td>
                        <td style="height: 33px"><input  id="1026" name="1026" type="text" /></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>

            <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:*</label></td>
                        <td style="height: 35px"><input id="1245" class="1245-required" name="1245" type="text" /></td>
                    </tr>
                    <tr>
                        <td style="height: 35px; width: 334px">Color:*</td>
                        <td style="height: 35px">
                        <select id="1433" class="1433-required" name="1433">
                <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="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
                    </tr>
                </table>
                            </fieldset>

            <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*:</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
                        </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>
            <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:*</td>
                        <td style="height: 35px">
                                                <input type="radio" name="1834" id="1834" value="None" class="valuetext" class="1834-required">None
                                                <input type="radio" name="1834" id="1834" value="All" class="valuetext" class="1834-required">All
                       </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>
<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>​

ここに私のjquery：

$("#section-11").hide();
$("#section-12").hide();
$("#section-13").hide();
$("#section-1011").hide();

var projtype = new Array(
        {value : 'Cars', sect_id : 'fieldset#section-11'},
        {value : 'Planes', sect_id : 'fieldset#section-12'},
        {value : 'Boats', sect_id : 'fieldset#section-13'}
    );
$("select#1169").on('change',function () {
var thisVal = $(this).val();
 var sect_id ="";
     //$('fieldset[id!="mainSection"]').hide();
    $(projtype).each(function() {
$(this.sect_id).hide();
        if(this.value == thisVal) {
        $(this.sect_id).show();
        }
    });        
});

$("#btnCatchReqFlds").on('click', function() {
    var requiredButEmpty = $("fieldset:visible").find('input[class*="-required"], select[class*="-required"]').filter(function() {
      return $.trim($(this).val()) === "";  
    });
    if ($requiredButEmpty.length) {
        $requiredButEmpty.each(function () {

            $("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
        });
    }
    return !$requiredButEmpty.length;
});

Answer 1

コードの文脈から外れているかもしれませんが、あなたの質問に答えることができます:

html5 を使用している場合は、次requiredのように、必要な入力に属性を追加するだけです。

<input type="text" required />

あなたのjQueryでそれらを検証するだけです：

var errorList = [];

function validateRequiredFields(){
    $("input").each(function(){
        if($(this).attr("required") && $(this).val() === ""){
            errorList.push($(this).attr("name"));
        }
    });
    showErrors();
}

function showErrors(){
    $("#holdErrMsg").html("Please fill in this fields: " + errorList.toString());
    errorList = [];
}

送信する前に validateRequiredFields を呼び出します。

さらに、特定のパターン (数字のみ) と一致させたい場合はpattern、入力に属性を追加して (テキスト型の場合)、正規表現との一致を試みることができます。つまり、10 桁の電話番号フィールド:

<input type="text" required pattern="^[0-9]{0,10}$" />

次に、 validateRequiredFields() は次のようになります。

function validateRequiredFields(){
    $("input").each(function(){
        if($(this).attr("required")){
            if($(this).attr("pattern") && !(new RegExp($(this).attr("pattern"))).test($(this).val())){
                errorList.push($(this).attr("name"));
            }
            else if($(this).val() === ""){
                errorList.push($(this).attr("name"));
            }
        }
    });
    showErrors();
}

Answer 2

まず、タイプミスがあります。

var requiredButEmpty

する必要があります

var $requiredButEmpty

また、チェックボックスとラジオボタンをチェックするためにその1つの関数を実際に使用することはできません。これらは、チェックされているか選択されているかを確認する必要があるためです。これらの値を確認しても機能しません。

Answer 3

上にリンクされている両方のフィドルを実行しようとするとエラーが発生するため、フィドルで実行しているコードがわかりません。

まず、コードのクリーンアップとして：

if ($requiredButEmpty.length) {
    $requiredButEmpty.each(function () {

        $("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
    });
}

本当に必要ではありません。それはただである可能性があります：

    requiredButEmpty.each(function () {
        $("#holdErrMsg").append("Please fill in the " + this.name + "<br />");
    });

長さがない場合は0回を超えて実行されないためです。

***また、jqueryオブジェクトを返すため、requiredButEmptyの前にある$を削除したことに注意してください。$（var）で参照し続ける必要はありません（それが単なるタイプミスでn / mでない限り）。

また、この行が何のためにあるのかわかりません

    return !$requiredButEmpty.length;

これはイベントハンドラーから呼び出される無名関数であるため、何も返す必要はなく、どこにも返さないことになります。

---

lu1sはかなり正しいと思います。html5を使用していない場合、またはhtml5をサポートするブラウザを使用していないユーザーがいることがわかっている場合のわずかな違いは、手動でclass = "required"を入力して、検索するだけです。 ：

$('.required').forEach(function(){
    if ($(this).val==='')
        --push to array
});

Answer 4

第二に、あなたのセレクターは0の一致を見つけています、私は一緒に行きます：

http://jsfiddle.net/justmelat/jVktq/

あなたの例のフィドルには、必要なクラスを持つ0のクラスがあります。それを追加すると、コードは正常に機能しました。