2

jQuery Validate プラグインを使用して、3 つのチェックボックスのうち少なくとも 1 つがチェックされていることを確認するカスタム メソッドを取得しました (この質問に従って)。

これは問題なく動作しますが、チェックボックスの 1 つがチェックされると、エラー コンテナーは消えません (エラー メッセージが消えてフォームが正常に送信されても​​)。エラー コンテナーは、「display: none」に戻るのではなく、「display: block」でスタックしたままになります。

これを示すJSFiddleを次に示します (これは私のフォームの簡易版です)。3 つのチェックボックスのうち 1 つがオンになっている場合、エラー メッセージが表示されなくても、エラー コンテナーはそのまま残ります。3 つのチェックボックスをすべてオンにすると、エラー メッセージ コンテナーが非表示になります。カスタムメソッドに従って、チェックボックスの1つだけがチェックされた後にエラーコンテナを非表示にする方法についてのアイデアをいただければ幸いです。

ここに私のHTMLがあります:

<form class="my_form" method="post" action="#">

  <div class="error-container">
    <ul>
    </ul>
  </div><!--error-container-->

    <p><label>My checkbox 1</label>
    <input class="my_checkbox_group" id="my_checkbox_1"
    name="my_checkbox_1[]" type="checkbox" value="Yes" /></p>
    <p><label>My checkbox 2</label>
    <input class="my_checkbox_group" id="my_checkbox_2"
    name="my_checkbox_2[]" type="checkbox" value="Yes" /></p>
    <p><label>My checkbox 3</label>
    <input class="my_checkbox_group" id="my_checkbox_3"
        name="my_checkbox_3[]" type="checkbox" value="Yes" /></p>
    <input type="submit" value="Submit" />
</form>

これが私のCSSです：

input.error { background: #fdf3f3; border: 1px solid #ff3333; color: #ff3333; }
.error-container    { background: #fdf3f3; border: 1px solid #ff3333; clear: both; display: none; overflow: auto; padding: 10px; }
.error-container ul { margin-bottom: 0; }
.error-container label { float: none; font-weight: normal!important; width: auto; }

ここに私のJSがあります：

$(document).ready(function () {

    $.validator.addMethod("checkboxrule", function (value, element) {
        return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked'))
    }, "Select at least one of these three");

    $('.my_form').validate({ // initialize the plugin
        errorContainer: ".error-container",
        errorLabelContainer: ".error-container ul",
        wrapper: "li",
        focusInvalid: false,
        ignore: "",
        groups: {
            somename: "my_checkbox_1[] my_checkbox_2[] my_checkbox_3[]"
        },
        rules: {
            'my_checkbox_1[]': {
                checkboxrule: true
            },
            'my_checkbox_2[]': {
                checkboxrule: true
            },
            'my_checkbox_3[]': {
                checkboxrule: true
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});
4

1 に答える 1

3

次のsuccessコールバック関数を.validate()オプションに追加します。

success: function() {
    $('.error-container').hide();
},

デモ: http://jsfiddle.net/M2gp4/

ところでignore: 非表示フィールドを検証する場合、オプションの適切な形式は ではありませんignore: ""。

である必要がありますignore: []。

この回答を参照してください: https://stackoverflow.com/a/8565769/594235

編集：

コードを最初に書いたように、エラー コンテナーは期待どおりに動作しますが、3 つのチェックボックスがすべてオンになっている場合のみです。

さらに、この問題は、groupsオプションを削除するとよくわかります。 この新しい jsFiddleでは、3 つのメッセージと、3 つのチェックボックスすべてをクリックすると何が起こるかを確認できます。有効なフォームでも、 をクリックするまでボックスは残りますsubmit。グループ内のすべてのチェックボックスがクリックされるまで、プラグインはこの「グループ」に対して検証テストを実行しません。3 つのチェックボックスすべてを 1 つの入力要素として扱っているようです。

可能な解決策は、.valid()メソッドを使用して、チェックボックスのいずれかをクリックするたびに検証テストを強制することです。

$('.my_checkbox_group').on('click', function(){
    $('.my_form').valid();
});

デモ: http://jsfiddle.net/M2gp4/3/

于 2013-03-13T01:24:54.630 に答える