如何为包含错误/有效输入字段的div添加一些样式？

Question

我在上面的字段中显示错误，但我想在它附近添加样式，例如，将一些图像作为背景添加到包含的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事件吗？             或

我应该为此添加错误标签吗？如果是这样 - 请提供表格和标签的验证示例，如果可能，请提供错误文本。

Answer 1

正如Saeed Py所说，你应该使用keyup / keydown事件而不是改变。偶然事件的问题是只有当输入元素失去焦点时才会触发它。

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

我已经quite simple 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');
}

this - ＆gt; $（本）

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