验证错误打开手风琴面板(Open accordion panel on validation err

我使用jQuery手风琴我的形式分成几个小组，并jQquery验证检查所需的字段。 它的伟大工程，只要他们在打开的面板来显示验证字段的错误。

一个例子。 比方说，我有树手风琴面板，第一我有一个需要验证两个表单域。 现在，如果访问者开关面板两个或三个submiting形式无无面板一个必填字段填写我想第一个手风琴面板打开并显示错误。

有谁知道一种方法，使这项工作？

这是我今天使用的代码：

$(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调用回调函数激活（）折叠菜单，打开第一个窗格的方法：

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

这就是说，处理一般的情况下（在任何窗格无效元素），并切换到适当的窗格会可以说是更好的。 要做到这一点，我们必须第一无效元素从取invalidHandler回调。 我们可以匹配errorClass由验证引擎（使用error默认情况下），但是我们不能盲目地匹配，因为该类也被应用到了错误信息标签。 限制了结果：输入选择器将帮助我们在这里。

从这里，我们可以使用最接近（）相匹配的祖先手风琴窗格， 指数（）来获取它的指数相对于其他窗格，这使我们下面的代码：

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

更新：我们也有叫showErrors()明确我们的invalidHandler ，因为该功能是负责装饰用的无效元素error摆在首位类，但通常只叫之后。 （来源： http://forum.jquery.com/topic/jquery-validate-invalidhandler-is-called-before-the-errors-are-shown-maybe-better-vice-versa 。）

Answer 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: [],
});

Answer 3:

对于那些谁正在使用MVC，该invalidHandler为您创建。 当我试图重写它（从https://github.com/jzaefferer/jquery-validation/issues/765 ）

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

表单总是提交。

我的解决办法是拉出来的功能和调用它被点击提交时。 我也不得不拔出忽略= []

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 = [];

文章来源: Open accordion panel on validation error