Плагин jQuery Validation - добавление класса ошибок к дополнительным элементам

Question

Плагин jQuery Validation - добавление класса ошибок к дополнительным элементам

0

У меня есть форма, которая использует плагин 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?

artmem 20 сен. 2013, в 17:53

Источник

Теги:

jquery

jquery-validate

1 ответ

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-09-20T14-03-00.000Z

Здесь элемент title является предыдущим .content родителя .content

вы можете использовать

$(element).closest(".content").prev('.title').addClass("error");

или

$(element).closest("li").children('.title').addClass("error");

это сработало: $ (element) .closest (". content"). prev (". title"). addClass ("error"); но теперь он не применяет класс ошибки к самому полю формы (что было предыдущим поведением по умолчанию). Есть ли способ сделать так, чтобы класс был добавлен как к самому полю, так и к ближайшему .title div?
@artmem Try $(element).closest(".content").prev('.title').addBack().addClass("error");
это добавляет класс ошибки к каждому элементу в div «content», а не только к самому полю.
@artmem, кажется, хорошо здесь jsfiddle.net/arunpjohny/8b8SE/1
исправил это следующим образом: $ (element) .closest (". content"). prev ('. title'). addClass ("error"); $ (Элемент) .addClass ( "ошибка");