jQuery验证和选项卡

在验证之前从所有选项卡中删除图标怎么样。

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

我意识到已经过去几个月了,但我必须自己处理这个问题,我相信我已经找到了一个很好的解决办法。

而不是修饰包含 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);
    }
});

在上面的代码中 突出 和 我从invalid元素(默认行为)中添加和删除适当的错误和有效类,然后使用(double)选择器获取任何 <a /> 加载包含div的元素,我向tab链接添加或删除相同的类。此代码假定选项卡内容是

更新

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

以下是我的作品。我发现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);
}

我也在为同样的问题奋斗,但我也放弃了。。。真正的拦截器是jqueryvalidate没有 onBeforeValidate

从源代码看,当一个字段变为有效字段时,他所做的一切似乎都是寻找具有正确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'));
            } 

请注意,我将标签的位置设为绝对位置,这样它们就可以并排放置,对于用户来说,10和1的堆栈没有区别。只需跟踪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;
    });
}

然后您只需绑定到表单的提交事件:

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

让我知道你的想法。

你总能得到 验证器 validate() 方法 不传递任何选项 jquery选择器 验证器在哪里 更早配置 . 还要注意,success回调接收 指向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();
        }
    }   
}