MVC form validation in multiple tabs - auto jump to tab with validation errors?

Question

I have tabstrip with multiple tabs. In each tab I have a number of text fields for the user to input. The tabstrip is surrounded by a form and just below a submit button.

I have annotated validation on the model attributes. Validations works fine using Jquery validation. However, if the user makes an input error in a field, goes to a different tab and press submit the error will appear in the inactive tab and thus not be seen by the user. I would like the Jquery validation automatically to go to the tab with the validation error, so the user can see it. Is this possible?

Answer 1

I don't think that there is out of the box solution for this. But you can do it in javascript pretty easy. What you do is on form submit you look at content of each tab, and if you find validation error then you switch to that tab.

here is sample:

<script type="text/javascript">
    $(document).ready(function () {
        $("#myForm").submit(function () {
            $("#tabs").tabs("select", $("#myForm .input-validation-error").closest(".ui-tabs-panel").get(0).id);
        });
    });
</script>

This sample assumes that your form's id is myForm, that your tab id is tabs. Also it assumes that you have ClientValidationEnabled = true and UnobtrusiveJavaScriptEnabled = true in web.config. This code snippet will switch to first tab with error.

This code is just sample and could be refactored, but it shows idea.