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 事件而不是更改。偶然事件的问题在于它只有在输入元素失去焦点时才会触发。

您可以将其更改为 keydown/keyup/keypress 以验证每次按键时的输入。如果用户仅使用鼠标粘贴数据，您还可以添加单击事件。

我做了一个非常简单的 jsfiddle 来演示这 3 个事件之间的区别。（这有点不完整，因为我没有使用任何字段验证......）。

至于你的 javascript，它可能应该更像这样：

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

大概应该写成

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

这个 -> $(这个)

当然，这取决于您向我们展示的更多标记。我假设一个 div 有一个围绕每个输入的公共类，如我的 jsfiddle 中所示。

于 2012-10-16T18:14:25.253 回答