0

上記のフィールドにエラーが表示されていますが、その近くにスタイルを追加したいと思います。たとえば、含まれているdivに背景として画像を追加します。

私はそれを次のように追加しています：

  $('input').change(function() {

  if ($(this).hasClass('valid')) {

  $(".field2").has(this).removeClass('bg2').addClass('bg1');
   }
  if ($(this).hasClass('error')) {

  $(".field2").has(this).removeClass('bg1').addClass('bg2');

   }
  })

およびcss：

.bg1 
  { 
  background-image: url('valid.png');
  background-repeat: no-repeat;
  background-position:320px 25px;
  }

 .bg2 
  {
   background-image: url('not_valid.png'); 
   background-repeat: no-repeat;
   background-position:320px 25px;
  }

しかし、今では次のように機能しています。

  1. 最初にjQuery検証フォームが表示されます
  2. 次に、私のbgは、次の入力の変更とフォームのクリックでのみ追加します

フィールドと一緒に背景を表示させたい。

単純なjQueryイベントを使用してそれを行うことができますか？ また

これにエラーラベルを追加する必要がありますか？その場合は、可能であれば、エラーテキストなしのフォームとラベルを使用した検証の例を提供してください。

4

1 に答える 1

1

Saeed Pyが言ったように、変更の代わりにkeyup/keydownイベントを使用する必要があります。チャンスイベントの問題は、入力要素がフォーカスを失ったときにのみトリガーされることです。

キーダウン/キーアップ/キープレスのいずれかで変更して、キーを押すたびに入力を検証できます。ユーザーがマウスのみでデータを貼り付ける場合は、クリックイベントを追加することもできます。

これらの3つのイベントの違いをデモする非常に単純なjsfiddleを作成しました。（フィールド検証を使用しなかったので、ちょっと不完全です...）。

あなたのジャバスクリプトに関しては、それはおそらくもっとこのようになるはずです：

if ($(this).hasClass('valid')) {
  $(".field2").has(this).removeClass('bg2').addClass('bg1');
}

おそらく次のように書く必要があります

if ($(this).hasClass('valid')) {
  $(".field2").has($(this)).removeClass('bg2').addClass('bg1');
}

this-> $（this）

もちろん、これはあなたが私たちに見せたものよりも多くのマークアップに依存します。jsfiddleに表示されているように、各入力を囲む共通のクラスを持つdivを想定しています。

于 2012-10-16T18:14:25.253 に答える