Я хочу, чтобы валидатор jQuery добавил класс к родительскому элементу формы

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 и unhighlight здесь, чтобы переопределить, где применяется 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/ о классах add remove css см. http://api.jquery.com/addClass/