jquery - jQuery Validator を使用したチェックボックスの状態の検証

Question

jQuery フォームバリデータプラグインを使用しています。フォームには 5 つのチェックボックスがあります。そのうちの最初のもの (マスター) がチェックされている場合、残りの 4 つがチェックされ、ユーザーがそれらを変更できないようにします。master がチェックされていない場合、残りの 4 つのボックスはユーザーが切り替え可能に戻ります。この機能は正常に動作します。今、私がやりたいことは、すべてのチェックボックスがオフになっている場合、フォームを無効にすることです。また、特定の領域 (checkBoxErrorHolder) に、チェックボックスのみの検証エラーメッセージを格納することも必要です。他のエラーメッセージは、入力によってデフォルトの位置に表示されます。これが私がこれまでに持っているものです：

<script language="javascript">
$(function() {
    $.validator.addMethod("validateCheckBoxes",
                          function (value, element, params)   {

                              var master=false, 
                                  slave1=false, 
                                  slave2=false,
                                  slave3=false,
                                  slave4=false;

                              if ($("#master").attr("checked"))
                                  master = true;
                              if ($("#slave1").attr("checked"))
                                  slave1 = true;
                              if ($("#slave2").attr("checked"))
                                  slave2 = true;
                              if ($("#slave3").attr("checked"))
                                  slave3 = true;
                              if ($("#slave4").attr("checked"))
                                  slave4 = true;

                              return (master || (slave1&&slave2&&slave3&&slave4));
                          }, 
                          "One or more check boxes must be checked");

    $("#theForm").validate({
        rules: { 
                   first: required,
                   last:  required,
                   email: {required: true, email: true},
                   master: { required: true, 
                             validateCheckBoxes: true},
                             errorPlacement: function(error, element) {
                                                 $("#checkBoxErrorHolder").html(error);
                                             }
                           }
                   slave1: { required: true, 
                             validateCheckBoxes: true},
                             errorPlacement: function(error, element) {
                                                 $("#checkBoxErrorHolder").html(error);
                                             }
                           }
                   slave2: { required: true,
                             validateCheckBoxes: true},
                             errorPlacement: function(error, element) {
                                                 $("#checkBoxErrorHolder").html(error);
                                             }
                           }
                   slave3: { required: true, 
                             validateCheckBoxes: true},
                             errorPlacement: function(error, element) {
                                                 $("#checkBoxErrorHolder").html(error);
                                             }
                           }
                   slave4: { required: true, 
                             validateCheckBoxes: true,
                             errorPlacement: function(error, element) {
                                                 $("#checkBoxErrorHolder").html(error);
                                             }
                           }
               },
        messages: {
            first: "required",
            last: "required",
            email: {
                       required: "Email address required",
                       email: "Please supply a valid email address"
                   }
        }
    });
});
</script>

<form id="theForm" ...>
<input type="text" name="first" value="" />
<input type="text" name="last" value="" />
<input type="text" name="email" value="" />
<input type="checkbox" id="master" value="master" class="validateCheckBoxes"/>
<input type="checkbox" id="slave1" value="slave1" class="validateCheckBoxes"/>
<input type="checkbox" id="slave2" value="slave2" class="validateCheckBoxes"/>
<input type="checkbox" id="slave3" value="slave3" class="validateCheckBoxes"/>
<input type="checkbox" id="slave4" value="slave4" class="validateCheckBoxes"/>
<input type="submit" />
</form>
<div id="checkBoxErrorHolder"></div>

言うまでもなく、期待した結果が得られていません。

score 2 · Accepted Answer

あなたのコード:

rules: { 
               first: required,
               last:  required,
               email: {required: true, email: true},
               master: { required: true, 
                         validateCheckBoxes: true},
                         errorPlacement: function(error, element) {
                                             $("#checkBoxErrorHolder").html(error);
                                         }
                       } // <-- missing comma
               slave1: { required: true, 
                         validateCheckBoxes: true},
                         errorPlacement: function(error, element) {
                                             $("#checkBoxErrorHolder").html(error);
                                         }
                       } // <-- missing comma

基本的に、さまざまな構文エラーとフォーマットエラーによってプラグインを壊してしまいました...

1) 他のルールと一緒に適用 するルールerrorPlacementではありません。他のオプションと一緒に一度適用する コールバック関数です...

$(document).ready(function () {

    $("#theForm").validate({
        rules: {
            // your rules
        },
        messages: {
            // your messages
        },
        errorPlacement: function (error, element) {
            $("#checkBoxErrorHolder ").html(error);
        },
        // other options and callback functions,
    });

});

2)checkbox要素にname属性がありません。このプラグインが正しく機能するには、送信ボタンを除くすべての入力、選択、ラジオ、チェックボックスなどに属性が必要です。name

3) のようなルールの短縮形を使用するときはいつでもrequired、引用符で囲む必要があります。これは、両方の方法を正しく示す例です...

rules: {
    first: "required",
    last: {
        required: true
    },
},

4) このために jsFiddle の作成を開始しました~~が、修正するよりも構文エラーが多すぎるため、停止しました~~。 ~~すべてを表示するには、jsFiddle の jsHint 関数を使用して JavaScript を実行してください。~~ 基本的な検証が機能するようになったので、カスタム~~メソッドのトラブルシューティングを行うことができますvalidateCheckBoxes~~。

これは、基本的なフォームの動作中の jsFiddle デモです: http://jsfiddle.net/gHKyb/

5) 編集: カスタムメソッドをもう一度見validateCheckBoxesて、最後の構文エラーをクリーンアップしました。しかし、すべてのチェックボックスに誤ってルールを定義したため、まだ機能していませんでしたrequired。これは、チェックボックスが常に必要であることを意味します。

すべてのチェックボックスからルールを削除したところrequired、仕様どおりにすべてが機能するようになりました。私もあなたのコードを要約しました。(最初のボックスをオンにするか、最後の 4 つのボックスをオンにする必要があります)

$.validator.addMethod("validateCheckBoxes", function (value, element, params) {
    var master,
        slave = [];
    if ($("#master").attr("checked")) {
        master = true;
    }
    $("[id^='slave']").each(function(i) {
        if ($(this).attr("checked")) {
            slave[i+1] = true;
        }
    });
    return (master || (slave[1] && slave[2] && slave[3] && slave[4]));
}, "One or more check boxes must be checked");

6)最後に、エラーラベルの配置を修正するために、errorPlacementコールバック関数を次のように変更しました。

errorPlacement: function (error, element) {
    if ($(element).attr("type") === "checkbox") {
        $("#checkBoxErrorHolder").html(error); // just for checkboxes
    } else {
        error.insertAfter(element); // default placement
    }
},
success: function() { // need "success" to dynamically clear any checkbox errors
    $("#checkBoxErrorHolder").html();
},

動作デモ: http://jsfiddle.net/AKgmH/

score 0 · Accepted Answer

各「チェック済み」の後に「」が欠落しているようです

if ($("#master").attr("checked"))
  master = true;
if ($("#slave1").attr("checked"))
  slave1 = true;
if ($("#slave2").attr("checked"))
  slave2 = true;
if ($("#slave3").attr("checked"))
  slave3 = true;
if ($("#slave4").attr("checked"))
  slave4 = true;

問題が解決するかどうかはわかりませんが、役立つ場合があります:)

jquery - jQuery Validator を使用したチェックボックスの状態の検証

2 に答える 2

Related

Reference