jquery – 关于验证错误打开手风琴面板

我正在使用jQuery手风琴将我的表单拆分成几个面板和jQquery验证来检查必需的字段.只要它们在打开的面板中,它就可以很好地显示已验证字段中的错误.

一个例子.假设我有树式手风琴面板,首先我有两个需要验证的表格字段.现在,如果访问者切换到面板二或三并提交表单而没有填写面板上的必填字段,我希望第一个手风琴面板打开并显示错误.

有没有人知道如何使这项工作？

这是我今天使用的代码：

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

解决方法

要解决您问题中的特定问题,您只需提供一个 invalidHandler回调函数,该函数调用accordion小部件的 activate()方法来打开第一个窗格：

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

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

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

$("#validate_form").validate({
    // your options,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(),因为这个函数首先负责用错误类来装饰无效元素,但通常只在之后调用. (来源：http://forum.jquery.com/topic/jquery-validate-invalidhandler-is-called-before-the-errors-are-shown-maybe-better-vice-versa.)