Question

如何使用jQuery validator在表单元素的父validate上添加/删除类名（例如<li>），这样我只需设置一个类就可以设置与该元素相关的所有内容的样式类名？

标记是

<li class="validate">
    <label for="product">Product of interest <abbr title="Required field">*</abbr></label>
    <input id="product" type="text" name="product" value="" placeholder="e.g. school bench" class="required" minlength="2">

    <!-- Hidden by CSS unless parent has 'validate' class -->
    <label for="product" class="description">Please name a product.</label> 
</li>

，默认的jQuery是

$("#commentForm").validate();

Answer 1

使用此处的highlight and unhighlight options覆盖应用errorClass（或validClass）的位置：

$("#commentForm").validate({
  highlight: function(element, errorClass, validClass) {
    $(element).closest('.validate').addClass(errorClass).removeClass(validClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).closest('.validate').addClass(validClass).removeClass(errorClass);
  }
});

通过默认，errorClass为“错误”并直接应用于输入元素。为了更好地说明，这是默认验证功能，当您不向.validate()提供这些选项时，会发生以下情况：

$("#commentForm").validate({
  errorClass: "error",
  validClass: "valid",
  highlight: function( element, errorClass, validClass ) {
    $(element).addClass(errorClass).removeClass(validClass);
  },
  unhighlight: function( element, errorClass, validClass ) {
    $(element).removeClass(errorClass).addClass(validClass);
  }
});

Answer 2

$(".validate").parent().removeClass('YouCSSClass');
$(".validate").parent().addClass('YouCSSClass');

此外，您可以在http://api.jquery.com/parent/查看有关添加删除css类的一些示例，请参阅http://api.jquery.com/addClass/

我希望jQuery验证器将一个类添加到表单元素的父级

2 个答案: