JQuery проверить и вкладки - PullRequest
Новая
       39

JQuery проверить и вкладки

4 голосов
/ 24 февраля 2010

Привет, я использую jQuery validate для проверки формы.

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

Пока все хорошо.

Моя проблема в том, что после исправления ошибки я не могу удалить ошибку в значке вкладки. Я предполагал, что валидатор доступен через успех, но это не

Предполагая, что первая вкладка (tab0) имеет 3 поля для проверки (field1, field2, field3)

Вот полный код 

    $("form#Form1")
        .validate({
            invalidHandler: function(form, validator) {              
                //TAB 0
                if (validator.errorMap.field1 != "" && validator.errorMap.field2 != "" && validator.errorMap.field3 != "") {
                    if ($("#tabs>ul>li").eq(0).find("img").length == 0) {
                        $("#tabs>ul>li").eq(0).prepend("<img src=\"error.gif\">");
                    }
                }               
            },
            errorClass: "errorField",
            errorElement: "p",
            errorPlacement: function(error, element) {
                var parent = element.parent();
                parent.addClass("error");
                error.prependTo( parent );
            },
//validator in not accessible via success
//so my code its not working
            success: function(element,validator) {
                var parent = element.parent();
                parent.removeClass("error");
                $(parent).children("p.errorField").remove();
                //TAB 0
                if (validator.errorMap.field1 == "" && validator.errorMap.field2 == "" && validator.errorMap.field2 == "") {
                    if ($("#tabs>ul>li").eq(0).find("img").length == 0) {
                        $("#tabs>ul>li").eq(0).find("img").remove();
                    }
                }   

           },   
            rules: {
                    field1: { required: true },
                    field2: { required: true },
                    field3: { required: true }      
                    }
    });

Любые предложения приветствуются.

Ответы [ 7 ]

2 голосов
/ 24 февраля 2010

Как насчет удаления значка со всех вкладок непосредственно перед проверкой. 

 $("form#Form1")
    .validate({
        //remove all icons here.
        //rest of your code

При повторной неудаче проверки значок заменяется, если это необходимо.

1 голос
/ 29 мая 2012

У меня работает следующее. Я обнаружил, что #formID в первом селекторе предложения else ускоряет код в занятых формах. 

$.validator.unobtrusive.parse(formID);
if ($(formID).valid()) {
    ...
    ...
}
else {
    $("#formID  #tabID").tabs("select", $("#formID .input-validation-error")
        .closest(".ui-tabs-panel").get(0).id);
}
1 голос
/ 25 мая 2010

Я понимаю, что прошло несколько месяцев, но мне просто нужно было решить эту проблему самому, и я считаю, что нашел хорошее решение.

Вместо того, чтобы украшать вкладку, содержащую ошибку в invalidHandler, вместо этого используйте обработчики highlight и unhighlight, чтобы соответствующим образом выделить или отменить выделение вкладки, содержащей недопустимую запись. В отличие от invalidHandler, который не вызывается до попытки отправки (или ручного вызова для проверки), highlight и unhighlight вызываются всякий раз, когда обрабатывается недопустимое поле, включая onBlur. 

jQuery('#Form').validate({
    highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass).removeClass(validClass);
        $('a[href=#' + $(element).parents('.ui-tabs-panel').attr('id') + ']').addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass).addClass(validClass);
        $('a[href=#' + $(element).parents('.ui-tabs-panel').attr('id') + ']').removeClass(errorClass).addClass(validClass);
    }
});

В приведенном выше коде для highlight и unhighlight я добавляю и удаляю соответствующие ошибки и допустимые классы из недопустимого элемента (поведение по умолчанию), а затем использую (двойной) селектор, чтобы получить любые <a />, которые загружают этот элемент содержит div, и я добавляю или удаляю те же классы к этой ссылке на вкладку. В этом коде предполагается, что содержимое вкладки не загружено с помощью AJAX, а ссылки, которые загружают div, имеют ссылку на идентификатор привязки div. Если ваша конфигурация ссылки на вкладки отличается, вам, вероятно, придется немного настроить селектор в соответствии с вашими потребностями.

Обновление

После проверки этого я обнаружил еще одну ловушку, которая может снизить легитимность решения. А именно, это удалит класс ошибки из ссылки на вкладку независимо от того, есть ли на этой вкладке все еще недопустимые элементы. Недействительные элементы по-прежнему остаются выделенными, но вкладка теряет свою подсветку. Я экспериментировал с жизнеспособными обходными путями к этой проблеме, и пока я не нашел один. Я обновлю это, если / когда я сделаю.

0 голосов
/ 23 февраля 2012

Вы всегда можете получить экземпляр validator , вызвав validate () метод , не передавая никаких параметров в селекторе jquery , где валидатор был настроен ранее . Также обратите внимание, что обратный вызов успеха получает единственный параметр, указывающий на метку DOM , созданную для неверного ввода. Таким образом, ваш обратный вызов успеха должен выглядеть следующим образом и работать как положено. 

success: function(label) {
    var parent = label.parent(); // Or any other logic to find the parent container
    parent.removeClass("error");
    $(parent).children("p.errorField").remove();
    validator = $("form#Form1").validate(); 
    // not sure, but $(this).validate() should also return validator

    //TAB 0
    if (validator.errorMap.field1 == "" && validator.errorMap.field2 == "" && validator.errorMap.field2 == "") {
        if ($("#tabs>ul>li").eq(0).find("img").length == 0) {
            $("#tabs>ul>li").eq(0).find("img").remove();
        }
    }   
}
0 голосов
/ 01 ноября 2011

Я придумала решение, которое я считаю довольно чистым и удобным для пользователя, просто сфокусируйте вкладку со следующей ошибкой, это работает до тех пор, пока ваши входные данные получат класс input-validation-error, когда есть ошибка, но вы можно изменить код, чтобы искать что-нибудь, вот функция: 

function FocusTabWithErrors(tabPanelName) {
    var tabpanel = $(tabPanelName);
    var tabs = tabpanel.children('div').toArray();
    var tabNames = Array();
    for (var i = 0; i < tabs.length; i++) {
        tabNames[i] = "#" + tabs[i].id;
    }
    tabpanel.find(":input").each(function () {
        if ($(this).hasClass('input-validation-error')) { 
            for (var z = 0; z < tabNames.length; z++) {
                if ($(tabNames[z]).find($(this)).length)
                    tabpanel.tabs("select", z);
            }
            return false; // ends each
        }
        return true;
    });
}

Затем вы просто привязываетесь к событию отправки формы: 

    $('#myForm').submit(function () {
        FocusTabWithErrors('#tabPanel');
    });

Дайте мне знать ваши мысли.

0 голосов
/ 19 февраля 2011

Глядя на источник, кажется, что все, что он делает, когда выясняет, что удалять, когда поле становится действительным, - это ищет элементы соответствующего типа с правильным CSS-классом. По умолчанию это 

<ul>
    <li><a href="#protocol-settings">Protocol<div style="display: inline-block; width:5px; height:10px; margin-left: 2px;" class="tab-errors"></div></a></li>
    <li><a href="#auth-settings">Authentication<div style="display: inline-block; width:5px; height:10px; margin-left: 2px;" class="tab-errors"></div></a></li>
    <li><a href="#trust-settings">Certificates<div style="display: inline-block; width:5px; height:10px; margin-left: 2px;" class="tab-errors"></div></a></li>
</ul>
0 голосов
/ 28 июня 2010

Я борюсь с той же проблемой, но тоже сдался ... ИМХО реальный блокировщик в том, что проверка jQuery не имеет обратного вызова onBeforeValidate. Это позволит вам удалить все значки ошибок до начала проверки, а затем позволит validate () переназначить их при необходимости.

...