jquery - 如果表单字段无效，则添加类

Question

使用 jQuery 验证进行 ajax 表单提交，如果任何文本输入具有类“错误”，我想向 errorContainer 添加一个类。看起来很简单，但我认为这是一个范围问题？

if ($('#myInput').hasClass('error')) { 
  $('#errorContainer').addClass('foo'); 
}

我把它放在提交处理程序之外，在提交处理程序内部，在验证调用之外，在验证调用内部......都无济于事。有没有人成功地完成了这个简单的任务？

Answer 1

你可以这样做：

if ($('input[type=text].error').length > 0) { 
  $('#errorContainer').addClass('foo'); 
}

$('input[type=text].error')即使只有一个匹配项，选择器也会返回一个类似数组的对象。所以问一个数组是否hasClass('error')没有意义。

您真正想要做的是在要检查错误类的元素周围放置一个容器。您可能已经有一个像表单这样的容器（如果它是表单上的所有输入）。然后你可以做这样的事情：

<form id="myForm">
  <input type="text" name="a" />
  <textarea name="b"></textarea>
  <input type="submit" value="Submit" />
</form>

使用 JavaScript：

$(':input.error', '#myForm').length > 0

这是一个示例jsfiddle。请注意，使用:input 选择器将提供比 input您想要的更多的输入类型。

Answer 2

大多数返回值的函数（例如.val()、.hasClass()等）只会作用于jQuery 对象中包含的选定元素组中的第一个元素。

通常在这些情况下，您需要做的是使用该.each()函数迭代所有元素，并对每个元素进行测试。

但是，由于您正在测试课程，因此您可以按照 Cymen 的答案中的详细说明修改您的条件。

Answer 3

您可以只使用toggleClass并传入条件

$('#errorContainer').toggleClass('foo',$('input[type=text].error').length > 0);

因此，如果有任何类错误..添加类 foo..否则删除类 foo