打开手风琴面板验证错误答案

【问题标题】：Open accordion panel on validation error打开手风琴面板验证错误
【发布时间】：2012-07-14 00:09:13
【问题描述】：

我正在使用 jQuery 手风琴将我的表单拆分为多个面板，并使用 jQuery 验证来检查所需的字段。只要验证字段在打开的面板中，就可以很好地显示已验证字段中的错误。

一个例子。假设我有树形手风琴面板，首先我有两个需要验证的表单字段。现在，如果访问者切换到面板 2 或 3 并在未填写面板 1 上的必填字段的情况下提交表单，我希望第一个手风琴面板打开并显示错误。

有人知道怎么做吗？

这是我今天使用的代码：

$(document).ready(function() {
$("#accordion").accordion({
    autoHeight: false,
    navigation: true,
});

$("#validate_form").validate({
    rules: {
        page_title: "required",
        seo_url: "required",
        AccordionField: {
            required: true
        }
    },
    ignore: [],
    messages: {
        page_title: "Please enter a page title",
        seo_url: "Please enter a valid name"
    }
 }); 
});

【问题讨论】：

标签： jquery jquery-validate validation jquery-ui-accordion

【解决方案1】：

要解决您问题中的具体问题，您只需提供一个invalidHandler 回调函数，该函数调用手风琴小部件的activate() 方法即可打开第一个窗格：

$("#validate_form").validate({
    // your options,
    invalidHandler: function(form, validator) {
        if (validator.numberOfInvalids() > 0) {
            $("#accordion").accordion("activate", 0);
        }
    }
});

也就是说，处理一般情况（任何窗格上的无效元素）并切换到适当的窗格可能会更好。为此，我们必须从invalidHandler 回调中获取第一个无效元素。我们可以匹配验证引擎使用的errorClass（默认为error），但是我们不能盲目匹配，因为该类也应用于错误消息标签。使用 :input 选择器限制结果将有助于我们。

从那里，我们可以使用closest() 来匹配祖先的手风琴窗格，并使用index() 来获取它相对于其他窗格的索引，这导致我们使用以下代码：

$("#validate_form").validate({
    // your options,
    invalidHandler: function(form, validator) {
        if (validator.numberOfInvalids() > 0) {
            validator.showErrors();
            var index = $(":input.error").closest(".ui-accordion-content")
                                         .index(".ui-accordion-content");
            $("#accordion").accordion("activate", index);
        }
    }
});

更新：我们还必须在invalidHandler 中显式调用showErrors()，因为这个函数首先负责用error 类装饰无效元素，但是通常只在之后调用。（来源：http://forum.jquery.com/topic/jquery-validate-invalidhandler-is-called-before-the-errors-are-shown-maybe-better-vice-versa。）

【讨论】：

几乎成功了。当我提交必填字段留空的表单时，它不会切换到相应的窗格。但是，如果我第二次提交，那么它会切换到第一个窗格并出现错误。似乎第一次只产生错误。
@user1511348，是的，调用showErrors() 应该可以解决这个问题。你看到我的更新了吗？

【解决方案2】：

API 略有变化，这是一个基于未来任何人选择的答案的工作示例。请注意ignore，它是防止手风琴中的隐藏字段被验证器忽略所必需的。

$('form').validate({
    invalidHandler: function(event, validator) {
        if (validator.numberOfInvalids() > 0) {
            validator.showErrors();
            // Open accordion tab with errors
            var index = $(".has-error")
                .closest(".ui-accordion-content")
                .index(".ui-accordion-content");
            $(".accordion").accordion("option", "active", index);
        }
    },
    ignore: [],
});

【讨论】：

还要注意从 $("#accordion").accordion("activate", index); 到 $(".accordion").accordion("option", "active", index); 的变化，对于手风琴中的第一项，索引等于 0。

【解决方案3】：

对于那些使用 MVC 的人，invalidHandler 是为你创建的。当我尝试覆盖它时（来自https://github.com/jzaefferer/jquery-validation/issues/765）

$form.off('invalid-form.validate')
                .on('invalid-form.validate', newInvalidHandler);

表单将始终提交。

我的解决方案是拉出函数并在点击提交时调用它。我还不得不拔出ignore=[]

function ShowPanel() {
    var validator = $("form").validate();
    if (validator.numberOfInvalids() > 0) {
        validator.showErrors();
        var index = $(".input-validation-error")
                    .closest(".ui-accordion-content")
                    .index(".ui-accordion-content");
        $("#accordion").accordion("option", "active", index);
    } 
}

$("#Save").click(function () { if (!$("form").valid()) { ShowPanel(); } });

$("form").data("validator").settings.ignore = [];

【讨论】：