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.

<

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.