jquery - 展开验证错误时的 Accordion 面板

Question

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

举个例子。假设我有三个 Accordion 面板，第一个面板上有两个需要验证的表单字段。现在，如果访问者切换到第二个或第三个面板并提交表单而不填写第一个面板上的必填字段，我希望第一个 Accordion 面板打开并显示错误。

有人知道如何实现这项工作吗？

这是我今天使用的代码:

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

Answer 1

要解决您问题中的具体问题，您只需提供 invalidHandler调用 activate() 的回调函数 Accordion 小部件打开第一个 Pane 的方法:

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

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

从那里，我们可以使用 closest()以匹配祖先折叠 Pane ，并且 index()获取其相对于其他 Pane 的索引，这导致我们得到以下代码:

$("#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。)