3

TwitterブートストラップでASP.net MVCを使用しています。

ブートストラップでエラーのあるフィールドを適切にスタイルするために、次を追加しました

$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest(".control-group").addClass("error");
    },
    unhighlight: function (element) {
        $(element).closest(".control-group").removeClass("error");
    }
});

これは、カスタム検証属性を除くすべての検証でうまく機能します。私が作成したカスタムバリデーターは、チェックボックスがチェックされているかどうかを確認し、チェックされていない場合は、テキストフィールドに何かが入力されることを期待しています。これは一例にすぎませんが、私が作成した他のカスタム検証属性は、以下で説明するのと同じ方法で失敗します。

フォームを送信すると、カスタム バリデータのあるフィールドを除いて、すべてのエラーが適切にスタイル設定されます。ただし、エラーメッセージが表示されたためにバリデーターが実行されたことはわかっていますが、メッセージとフィールドは赤ではなく黒です。

バリデータを満たすためにフィールドにテキストを入力すると、エラーメッセージが消えます。次に、そのテキストを削除すると、エラー メッセージが返され、すべてが本来あるべき赤のスタイルになります。

次に、フォームを再度送信すると、エラーが残っていても赤いスタイリングは消えますが、カスタムバリデータのあるフィールドについてのみ、他のすべてのエラーは赤いままです。

フォームの送信時に、設定したデフォルト (上記) はカスタム バリデータを含むフィールドに対しては実行されませんが、他のすべてに対してはデフォルトが実行されます。

それでも、カスタム バリデーターを使用したフィールドで on blur および key up イベントを使用すると、すべてが期待どおりに動作し、すべてのスタイリングが期待どおりに機能します。

私は次に何を見るべきか途方に暮れています。ヘルプ/指示をいただければ幸いです。

4

1 に答える 1

0

同じ内に有効な入力と無効な入力があることがわかるまで、最近同じ問題がありました.control-group。（<input type="hidden">私の場合はフィールド）。それがあなたのケースにも当てはまる場合は、次のようにandメソッドerrorClassによって提供されるを使用できます。highlightunhighlight

function highlight(element, errorClass, validClass) {
    $(element)
        .addClass(errorClass)
        .closest(".control-group")
        .addClass("error");
};

function unhighlight(element, errorClass, validClass) {
    var c = $(element)
        .removeClass(errorClass)
        .closest(".control-group");
    // make sure not to remove parent container error class, 
    //if there is still an invalid input field inside
    if (c.find("." + errorClass).length < 1) 
        c.removeClass("error");
};
于 2013-06-27T20:11:39.317 に答える