Expand accordion panel on validation error

Question

I am using jQuery accordion to split my forms into several panels and jQuery 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 three accordion panels and on the first I have two form fields that need to be validated. Now, if the visitor switches to panel two or three and submits 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"
    }
 }); 
});

Okeechobee

Answer 1

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);
        }
    }
});

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.

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);
        }
    }
});

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.)

Benign

It almost worked. When I submit the form with required fields left blank it doesn't switch to the appropriate pane. But if I submit a second time then it switch to the first pane with errors. It seems like the first time only generates the errors. – Okeechobee

@user1511348, yup, the call to showErrors() is supposed to fix this. Did you see my update? – Cenis

Answer 2

The API has changed slightly, here is a working example based on the selected answer for anyone in the future. Note the ignore which is needed to prevent the hidden fields in an accordion from being overlooked by the validator.

$('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: [],
});

Cameroun

Also note the change from $("#accordion").accordion("activate", index); to $(".accordion").accordion("option", "active", index);, with index equal to 0 for the first item in the accordion. – Columbous

Answer 3

For those who are using MVC, the invalidHandler is created for you. When I tried overriding it (from https://github.com/jzaefferer/jquery-validation/issues/765)

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

The form would always submit.

My solution is to pull out the function and call it when the submit is clicked. I also had to pull out the 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 = [];

Courson