jQuery Validationプラグイン（スタイル付きテキストボックス付き）

Question

私は、3行3列テーブルの真ん中にあるtextexboxを持っています。 「外側の」表のセルは、テキストボックスに装飾を追加するために使用されます。テキストボックスに入力されたデータが無効な場合、テキストボックスの色は変化し、周囲の画像も変化します。ここに私の問題があります。ログインページには、ユーザー名texboxとパスワードテキストボックスがあります。もし私がフィールドに表示される画像が必要であるように、いずれもtexboxの色を書き換えずに提出すると、変更されます。私の問題は、ユーザーが何らかのテキストを入力したときにそれらを元の状態に戻す方法です。これを処理するために私自身のJavaScriptを書くことができましたが、アプリケーションの残りの部分と同様に、jQueryを使用して検証しています。何か案は？ここで

は、私が今取り組んでいるものです。

 $.APP.login = $("#logOnDiv > form").validate({ 
     errorPlacement: function (error, element) { 
      element.parents('table').removeClass('input-table'); 
      element.parents('table').addClass('invalid-input-table'); 
     }, 
     errorClass: "invalid-decorated-input" 
    }); 

Answer 1

はkeypressのようなテキストボックス自体のイベントに耳を傾けます。そこに自分自身をliveイベントを使用し、テキストボックスに無効なクラスを追加することでこれを行うには、より効率的な方法がありますが、これはあなたでない限り十分なはず

$('.isValidated').keypress(function() { 
    if($(this).val().length) { //we have text now 
    $(this).parents('table.invalid-input-table').removeClass('invalid-input-table'); 
    //put any other code to remove other html elements (like the images here) 
    //traversal would be from the text box, so you could do things like $(this).siblings('img').remove(), etc. 
    } 
}); 

...各テキストボックスはisValidatedというクラスを持っていると仮定すると、非常に多くの分野について話しています。