Вопрос по jquery-validate, jquery-ui-accordion, jquery, validation – Открыть панель аккордеона при ошибке валидации

5

Я использую аккордеон jQuery для разделения моих форм на несколько панелей и проверки jQquery для проверки обязательных полей. Это прекрасно работает для отображения ошибок в проверенных полях, если они находятся на открытой панели.

Пример. Допустим, у меня есть панели для аккордеона, и на первом у меня есть два поля формы, которые необходимо проверить. Теперь, если посетитель переключается на панель два или три и отправляет форму без заполнения обязательных полей на панели один, я хочу, чтобы первая панель аккордеона открылась и показала ошибки.

Кто-нибудь знает способ сделать эту работу?

Это код, который я использую сегодня:

$(document).ready(function() {
$("#accordion").accordion({
    autoHeight: false,
    navigation: true,
});

$("#validate_form").validate({
    rules: {
        page_title: "required",
        seo_url: "required",
        AccordionField: {
            required: true
        }
    },
    ignore: [],
    messages: {
        page_title: "Please enter a page title",
        seo_url: "Please enter a valid name"
    }
 }); 
});

Ваш Ответ

3   ответа
0

Когда я попытался переопределить его (изhttps://github.com/jzaefferer/jquery-validation/issues/765)

$form.off('invalid-form.validate')
                .on('invalid-form.validate', newInvalidHandler);

Форма всегда будет отправлена.

Мое решение состоит в том, чтобы вытащить функцию и вызвать ее при нажатии кнопки «Отправить». Я также должен был вытащить игнорировать = []

function ShowPanel() {
    var validator = $("form").validate();
    if (validator.numberOfInvalids() > 0) {
        validator.showErrors();
        var index = $(".input-validation-error")
                    .closest(".ui-accordion-content")
                    .index(".ui-accordion-content");
        $("#accordion").accordion("option", "active", index);
    } 
}

$("#Save").click(function () { if (!$("form").valid()) { ShowPanel(); } });

$("form").data("validator").settings.ignore = [];
3

вот рабочий пример, основанный на выбранном ответе для любого в будущем. Обратите вниманиеignore который необходим для того, чтобы валидатор не мог пропустить скрытые поля в аккордеоне.

$('form').validate({
    invalidHandler: function(event, validator) {
        if (validator.numberOfInvalids() > 0) {
            validator.showErrors();
            // Open accordion tab with errors
            var index = $(".has-error")
                .closest(".ui-accordion-content")
                .index(".ui-accordion-content");
            $(".accordion").accordion("option", "active", index);
        }
    },
    ignore: [],
});
Также обратите внимание на изменение от$("#accordion").accordion("activate", index); в$(".accordion").accordion("option", "active", index);с индексом, равным 0 для первого элемента в аккордеоне.
2

вам нужно только предоставитьinvalidHandler функция обратного вызова, которая вызываетактивировать () Метод виджета аккордеон для открытия первой панели:

$("#validate_form").validate({
    // your options,
    invalidHandler: function(form, validator) {
        if (validator.numberOfInvalids() > 0) {
            $("#accordion").accordion("activate", 0);
        }
    }
});

Тем не менее, обработка общего случая (недопустимые элементы на любой панели) и переключение на соответствующую панель, возможно, будет лучше. Чтобы сделать это, мы должны получить первый недопустимый элемент изinvalidHandler Перезвоните. Мы можем соответствоватьerrorClass используется механизмом проверки (error по умолчанию), однако мы не можем слепо сопоставить это, потому что этот класс также применяется к меткам сообщений об ошибках. Ограничение результатов с: вход Селектор поможет нам здесь.

Оттуда мы можем использоватьБлижайший () чтобы соответствовать панели аккордеона предка, ииндекс() чтобы получить его индекс относительно других панелей, что приводит нас к следующему коду:

$("#validate_form").validate({
    // your options,
    invalidHandler: function(form, validator) {
        if (validator.numberOfInvalids() > 0) {
            validator.showErrors();
            var index = $(":input.error").closest(".ui-accordion-content")
                                         .index(".ui-accordion-content");
            $("#accordion").accordion("activate", index);
        }
    }
});

Update: Мы также должны позвонитьshowErrors() явно в нашемinvalidHandlerтак как эта функция отвечает за декорирование недопустимых элементовerror класс в первую очередь, но обычно вызывается только потом. (Источник:http://forum.jquery.com/topic/jquery-validate-invalidhandler-is-called-before-the-errors-are-shown-maybe-better-vice-versa.)

Это почти сработало. Когда я отправляю форму с обязательными полями, оставленными пустыми, она не переключается на соответствующую панель. Но если я отправляю второй раз, он переключается на первую панель с ошибками. Кажется, первый раз выдает только ошибки. perqedelius
Сладкая, теперь она работает как шарм! Большое спасибо! perqedelius
@ user1511348, да, звонок вshowErrors() должен исправить это. Вы видели мое обновление?

Похожие вопросы