4

嗨，我正在使用 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 }      
                    }
    });

欢迎任何建议。

4

7 回答 7

2

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

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

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

于 2010-02-24T13:29:16.253 回答
1

以下对我有用。我发现 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);
}
于 2012-05-29T13:49:20.387 回答
1

我意识到已经几个月了，但我只需要自己处理这个问题，我相信我已经想出了一个很好的解决方案。

与其在 中装饰包含错误的选项卡，不如invalidHandler使用highlightandunhighlight处理程序适当地突出显示或取消突出显示包含无效条目的选项卡。与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 锚 ID 的 href。如果您的选项卡链接配置不同，您可能需要根据需要稍微调整选择器。

更新

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

于 2010-05-24T22:52:25.867 回答
0

您始终可以通过调用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();
        }
    }   
}
于 2012-02-22T20:31:21.633 回答
0

查看源代码，似乎他在确定字段有效时要删除的内容时所做的就是寻找具有正确 CSS 类的适当类型的元素。默认情况下是 <label /> 和“错误”。所以我在我的自定义 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>
于 2011-02-19T01:42:02.613 回答
0

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

于 2010-06-28T10:36:50.453 回答
0

我想出了一个我认为非常干净且用户友好的解决方案，只需将选项卡聚焦到下一个错误，只要您的输入在出现错误时获得类 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');
    });

让我知道你的想法。

于 2011-11-01T15:36:21.797 回答