我希望jQuery验证程序将一个类添加到表单元素的父级 [英] I want jQuery validator to add a class to the form element's parent

问题描述

如何使用 jQuery验证器添加/删除类名(例如，validate )放在表单元素的父元素<li>上，因此我可以通过只设置一个类名来设置与该元素相关的所有内容的样式?

How do I use jQuery validator to add/remove a classname (e.g. validate) on the form element's parent <li> so I can style everything related to that element by only setting the one classname?

标记是

<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是

and the default jQuery is

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

推荐答案

使用 和unhighlight选项，以覆盖errorClass(或validClass)的应用位置:

Use the highlight and unhighlight options here to override where the errorClass (or validClass) gets applied:

$("#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()提供这些选项时，将发生以下情况:

---

By default, the errorClass is "error" and get applied directly on the input element. For a better illustration, this is the default validate functions, when you don't provide these options to .validate(), here's what happens:

$("#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);
  }
});

这篇关于我希望jQuery验证程序将一个类添加到表单元素的父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！