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?

Andrej Slivko · Accepted Answer · 2011-06-12 08:42:01Z

7

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.

edited Jun 12, 2011 at 8:42

answered Jun 12, 2011 at 8:36

Andrej Slivko

1,2662 gold badges13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrej Slivko Over a year ago

you could also add small usability feature $("#myForm.input-validation-error").focus(); in submit handler. This will focus unvalid input. Users will thanks you for it :)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related