У меня есть форма, которая использует плагин jQuery Validation. Поля формы состоят из ряда блоков аккордеона, и сообщения об ошибках формы отображаются под каждым полем. Это прекрасно, если поле находится в гармонике, который закрыт, и тогда нет никакого способа узнать, что аккордеон содержит ошибку.
Есть ли способ применить класс ошибки к заголовку аккордеона? Я знаю, что могу использовать что-то вроде
$("#form").validate({
rules: {
...
},
highlight: function(element) {
$(element).closest(".title").addClass("error");
},
unhighlight: function(element) {
$(element).closest(".title").removeClass("error");
}
});
для таргетинга на контейнер поля, но в этом случае он не является родителем.
Моя структура аккордеона ниже. Мне нужно применить класс ошибки к соответствующему "заголовку" div, который содержит поле, создающее ошибку.
<ul class="accordion">
<li class="active">
<div class="title panel1">
Accordion Panel 1
</div>
<div class="content">
... form fields go here ...
</div>
</li>
<li>
<div class="title panel2">
Accordion Panel 2
</div>
<div class="content">
... more form fields go here ...
</div>
</li>
<li>
<div class="title panel3">
Accordion Panel 3
</div>
<div class="content">
... more form fields go here ...
</div>
</li>
</ul>
Я также пробовал это без везения:
highlight: function(element) {
$(element).closest(".title").addClass("error");
},
unhighlight: function(element) {
$(element).closest(".title").removeClass("error");
}
Есть ли способ нацелиться на "заголовки" div?
Здесь элемент title
является предыдущим .content
родителя .content
вы можете использовать
$(element).closest(".content").prev('.title').addClass("error");
или
$(element).closest("li").children('.title').addClass("error");
$(element).closest(".content").prev('.title').addBack().addClass("error");