0

ログインエラーメッセージを入れたいdivがあります：

<div id="loginMessage" class="blankBox">&nbsp;</div>

検証エラーが発生した場合、この div のクラスを「errorBox」にしたいと考えています。検証エラーがない場合は、css を「blankBox」にしたいです。

そして、次のjQuery検証があります：

<script>
    $(function() {
       $("#loginForm").validate({   
            rules: {
                username: "required",
                password: "required"
            },
            messages: {
                username: "Please enter a username",
                password: "Please enter a password",
            },
            errorLabelContainer: "#loginMessage",
            wrapper: "li",
                            highlight: function(element) {
                                $(element).addClass('errorBox');
                            }, 
                            unhighlight: function(element) {
                                $(element).removeClass('errorBox');
                            },
        });
    });
    </script>

残念ながら、エラー ボックス css が入力フィールドに適用されています。?!? これを機能させることはできません。

何か案は？

4

1 に答える 1

0

別の回答からのコメントに基づいて:

「css にエラーが表示されるまでニュートラルにしておき、エラーが発生したらニュートラルにリセットしたい」

「ニュートラル」が何を意味するのかわかりませんが、デフォルトでは、すべてのエラーがコンテナーから出ると、プラグインはコンテナーを「非表示」にします。言い換えれば、コンテナ内にエラーがある場合にのみ表示されるため、コンテナにエラーが含まれている場合のコンテナのスタイルだけが重要です。それ以外の場合は、単に隠されています。この初期状態を実現するには、スタイルを に設定しdisplay: none;ます。また、エラーが表示されるタイミングについて、他のプロパティを設定することもできます。(jsFiddle の例を参照してください)。

他の答えにもかかわらず、errorPlacementこのシナリオでは役に立ちません。個々のメッセージを配置するためにのみ使用されます。エラーコンテナ内のメッセージとは関係ありません。

また、フィールドごとに起動され、エラー コンテナーとは関係がないためhighlight、コールバック関数も削除しました。unhighlight(独自の関数でオーバーライドすることで、デフォルトの機能も壊れています。)

デモ: http://jsfiddle.net/6dCB7/

jQuery:

$(document).ready(function () {

    $('#loginForm').validate({ // initialize the plugin
        errorLabelContainer: "#loginMessage",
        wrapper: "li",
        rules: {
            // your rules
        }
    });

});

HTML :

<div id="loginMessage"></div>
<form id="loginForm">
    ....
</form>

CSS :

#loginMessage {
    display: none;
    /* also set the properties for when it displays with errors */
}
于 2013-03-20T04:28:36.207 に答える