javascript - jQuery 検証: エラー メッセージを非表示にし、無効なフィールドの背景色を変更する

Question

サンプル フォームは次のとおりです。
エラー メッセージを表示せず、代わりに無効なフィールドの背景色を変更するようにフォームをカスタマイズするにはどうすればよいですか?

これを無駄に試しました：

$("form").validate({
  errorPlacement: function(error, element) {
     $(element.error).css("background","red");
   }
 })

Answer 1

必要なのは 2 行の CSS だけです。

label.error {display: none !important;}
.error {background: #F00;}

Answer 2

invalidHandlerこれは、validate プラグインでコールバックを処理することで実行できます。

コード：

$('#commentForm').validate({
    invalidHandler: function() {
        setTimeout(customizeErrors, 200);
    }
});

function customizeErrors() {
    $('label.error').each(function() {
        $(this).prev().addClass('has-error');
        $(this).prev().attr('title', $(this).text());
    });
    $('label.error').remove();
}

デモ: http://jsfiddle.net/2LwTa/

注:エラー メッセージは、理想的には単なるツールヒントであってはなりません。これは、キーボードだけを使用しているユーザーには表示されないことを意味するためです。