Question

I have a page with jQuery UI tabs on it, and a single required field on the first tab. Validation works, and the validation message appears next to the field if the user hasn’t entered a value. However, if the user is not on the first tab, it isn’t obvious that the field is invalid.

In this case, I would like to show the first tab, but I’m not sure how to go about registering a callback for an ‘invalid’ event, if there is one.

I have also considered showing a validation summary above the tabs, which would be visible regardless of the tab the user is on, but my preference would be to take the user to the field.

I’ve tried looking through the jquery.validate.unobtrusive.js file, and it seems to extend jquery.validate.js. Looking at the documentation for jquery.validate, I see there is an invalidHandler option that can be passed to the validate method, but I don’t know how to make use of this since that method is called by jquery.validation.unobtrusive.

I’m feeling a bit lost here, so any help would be appreciated!

Edit

I never figured out the answer, but did come up with a workaround, which I posted below. Still, I hope someone answers with a better way to do this.

Answer 1

I ended up validating and submitting the form manually:

$("#save-button").button().click(function() {
    if (!$("#profile-form").valid()) {
        if ($("#tabs").tabs("option", "selected") > 0) {
            $("#tabs").tabs("option", "selected", 0);
        }
        return false;
    }
    $("#profile-form").submit();
});