打开确认错误的手风琴面板 [英] Open accordion panel on validation error

问题描述

我正在使用jQuery手风琴将表单拆分成几个面板，并通过jQquery验证来检查必填字段.只要在打开的面板中显示已验证字段中的错误，它就非常有用.

I am using jQuery accordion to split my forms into several panels and jQquery validation to check the required fields. It works great to show errors in validated fields as long as they are in the open panel.

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

An example. Let's say I have tree accordion panels and on the first I have two form fields that needs to be validated. Now, if the visitor switch to panel two or three and submiting the form without without filling in the required fields on panel one I want the first accordion panel to open up and show the errors.

有人知道做这项工作的方法吗?

Does anybody know a way to make this work?

这是我今天使用的代码:

This is the code I'm using today:

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

推荐答案

要解决您问题中的特定问题，您只需提供一个的Validation/validate#toptions"rel =" nofollow> invalidHandler 回调函数手风琴小部件的activate()方法打开第一个窗格:

To solve the specific problem in your question, you only have to provide a an invalidHandler callback function that calls the activate() method of the accordion widget to open the first pane:

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

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

That said, handling the general case (invalid elements on any pane) and switching to the appropriate pane would arguably be better. To do that, we have to fetch the first invalid element from the invalidHandler callback. We can match the errorClass used by the validation engine (error by default), however we cannot blindly match that because that class is also applied to the error message labels. Restricting the results with a :input selector will help us here.

从那里，我们可以使用 closest()来匹配祖先的手风琴面板和 index()以获得相对于其他窗格的索引，这使我们得到以下代码:

From there, we can use closest() to match the ancestor accordion pane, and index() to obtain its index relative to the other panes, which leads us to the following code:

$("#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-被称为-before-the-errors-are-shown-bebe-better-vice-versa .)

Update: We also have to call showErrors() explicitly in our invalidHandler, since this function is responsible for decorating the invalid elements with the error class in the first place, but is normally only called afterwards. (Source: http://forum.jquery.com/topic/jquery-validate-invalidhandler-is-called-before-the-errors-are-shown-maybe-better-vice-versa.)

这篇关于打开确认错误的手风琴面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！