Open accordion panel on validation error

Question

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

Answer 1

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