Question

您好我正在使用jQuery验证我的表单验证。

表单位于选项卡内。当我收到错误时，我在选项卡中添加了一个图标，表明用户可以看到错误

到目前为止一切顺利。

我的问题是，在纠正错误后我无法删除标签图标中的错误。我假设验证器可以通过成功访问，但它不是

假设第一个标签（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 }      
                    }
    });

欢迎提出任何建议。

Answer 1

如何在验证前从所有标签中删除图标。

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

当验证再次失败时，它将在必要时替换图标。

Answer 2

我意识到已经有几个月了，但我只是自己处理这个问题而且我相信我已经找到了一个很好的解决方案。

不是使用invalidHandler中的包含错误的标签进行装饰，而是使用highlight和unhighlight处理程序来适当地突出显示或取消突出显示包含无效条目的标签。与在尝试提交（或手动调用以验证提交）之前未调用的invalidHandler不同，只要处理了无效字段（包括onBlur），就会调用highlight和unhighlight。

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的上面代码中，我从无效元素中添加和删除了相应的错误和有效类（默认行为），然后我使用（双）选择器来获取任何{加载该元素包含div的{1}}我向该标签链接添加或删除相同的类。此代码假定选项卡内容不加载了AJAX，并且加载div的链接具有div的锚点ID的href。如果您的标签链接配置不同，您可能需要根据需要稍微调整选择器。

更新

经过测试后，我发现了一个陷阱，这可能会降低解决方案的合法性。也就是说，无论该选项卡中是否仍存在无效元素，这都将从选项卡链接中删除错误类。无效元素仍然保持突出显示，但标签失去突出显示。我一直在试验这个问题的可行解决方法，到目前为止我还没有找到。如果/我什么时候会更新。

Answer 3

以下适用于我。我发现else子句的第一个选择器中的#formID可以加速繁忙表单上的代码。

$.validator.unobtrusive.parse(formID);
if ($(formID).valid()) {
    ...
    ...
}
else {
    $("#formID  #tabID").tabs("select", $("#formID .input-validation-error")
        .closest(".ui-tabs-panel").get(0).id);
}

Answer 4

我正在与同样的问题作斗争，但也放弃了......恕我直言，真正的阻止者是jQuery验证没有onBeforeValidate回调。这将允许您在验证开始之前删除所有错误图标，然后让validate（）在必要时重新分配它们。

Answer 5

查看源代码时，在确定字段变为有效时要删除的内容时，他所做的就是查找具有正确CSS类的相应类型的元素。默认情况下，＆lt; label /＆gt;和“错误”。所以我在我的自定义errorPlacement函数中写了一些额外的代码，当一个字段无效时，在标签标题中粘贴一个额外的标签，只要我正确创建它，一旦字段有效就立即将它删除：

 errorPlacement: function (error, element) {
                $(error).appendTo($(element).closest('.form-item').find('.form-label-error'));
                var tabLabel = $("<label style='position: absolute; '/>")
                .attr("for", element.attr('id'))
                .addClass("error")
                .html("*");

                $('a[href="#' + $(element).closest('.ui-tabs-panel').attr("id") + '"] .tab-errors').append(tabLabel);
                resizeDialog($('#popup-container'));
            }

请注意，我将标签的位置设置为绝对位置，以便它们只是位于彼此之上，对于用户来说，10和只有一个堆栈之间没有区别。只需跟踪DOM树就可以找到正确的标记选项卡（感谢Nathan Taylor！），大概如果它不在选项卡中，则选择器应该失败。我的标签定义如下所示：

<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>

Answer 6

我提出了一个解决方案，我认为非常干净且用户友好，只需将标签与下一个错误重点关注，只要您的输入在出现错误时获得类输入验证错误，可以更改代码以查找任何内容，这是函数：

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');
    });

让我知道你的想法。

Answer 7

您始终可以通过调用 jquery选择器上的validate()方法而不通过任何选项来获取验证程序实例之前已配置。另请注意，成功回调接收指向为无效输入创建的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();
        }
    }   
}

jQuery验证和标签

7 个答案:

更新