jQuery验证和选项卡

您好，我正在使用jQuery验证进行表单验证

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

到目前为止还不错

我的问题是，更正错误后，我无法删除选项卡图标中的错误。 我假设验证器可以通过success访问，但它不是

假设第一个选项卡（tab0）有3个字段用于验证（字段1、字段2、字段3）

这是完整的代码

    $("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 }      
                    }
    }); 

$（“表格#表格1”）
.验证({
invalidHandler:函数（窗体，验证程序）{
//表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）.前置（“”）；
}
}               
},
errorClass:“errorField”，
错误元素：“p”，
errorPlacement:函数（错误，元素）{
var parent=element.parent（）；
parent.addClass（“错误”）；
错误。prependTo（父级）；
},
//无法通过成功访问中的验证程序
//所以我的代码不起作用了
成功：函数（元素、验证器）{
var parent=element.parent（）；
parent.removeClass（“错误”）；
$（parent.children（“p.errorField”）.remove（）；
//表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（）；
}
}   
},   
规则：{
字段1:{required:true}，
字段2:{required:true}，
字段3:{required:true}
}
}); 

---

欢迎您提出任何建议。

在验证之前从所有选项卡中删除图标如何

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

---

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

我意识到已经过了几个月，但我必须自己处理这个问题，我相信我已经找到了一个好的解决方案

与其装饰包含

invalidHandler

中错误的选项卡，不如使用

高亮显示

和

取消高亮显示

处理程序适当高亮显示或取消高亮显示包含无效条目的选项卡。与

invalidHandler

在尝试提交（或手动调用以验证提交）之前不会被调用不同，每当处理无效字段（包括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);
    }
});

在上面的

高亮显示

和

取消高亮显示

的代码中，我从无效元素（默认行为）中添加和删除适当的错误和有效类，然后使用（双）选择器获取加载该元素包含div的任何

，并向该选项卡链接添加或删除相同的类。这段代码假设选项卡内容没有用AJAX加载，加载div的链接有一个指向div锚ID的href。如果选项卡链接配置不同，您可能需要根据需要稍微调整选择器

---

更新

---

在进一步测试之后，我发现了一个陷阱，它可能会降低解决方案的合法性。也就是说，这将从选项卡链接中删除错误类，而不管该选项卡中是否仍然存在无效元素。无效元素仍保持高亮显示，但选项卡将丢失其高亮显示。我一直在试验解决这个问题的可行方法，但到目前为止我还没有找到。如果/当我这样做的时候，我会更新这个。

我正在与同样的问题作斗争，但我也放弃了。。。真正的拦截器是jQuery validate没有

onBeforeValidate

回调。这将允许您在验证开始之前删除所有错误图标，然后让validate（）在必要时重新分配它们。

查看源代码，在确定字段变为有效时要删除的内容时，他所做的一切似乎就是查找具有正确CSS类的适当类型的元素。默认情况下，这是和“错误”。因此，我在自定义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'));
            } 

errorPlacement:函数（错误，元素）{
$（错误）.appendTo（$（元素）.closest（'.form item'）.find（'.form label error'））；
变量tabLabel=$（“”）
.attr（“for”，element.attr（'id'））
.addClass（“错误”）
.html（“*”）；
$（'a[href=“#”+$（元素）.closest（'.ui选项卡面板'）.attr（“id”）+'].tab errors'）.append（tabLabel）；
调整对话框大小（$（“#弹出式容器”）；
} 

请注意，我将标签的位置设置为绝对位置，这样它们就可以彼此重叠，对于用户来说，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>

我提出了一个解决方案，我认为这个解决方案非常干净、用户友好，只需将选项卡的焦点对准下一个错误，只要您的输入在出现错误时出现类输入验证错误，这个方法就行了，但您可以更改代码以查找任何内容，函数如下：

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

---

让我知道您的想法。

您随时可以通过calli获得验证程序实例

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

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

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