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

[Christian]

 

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?

Thanks!

 

[nachid]

I am using exaclty the same process.
To solve this issue, I am using jQuery and checking if validation-summary-errors class exists whith



.hasClass('validation-summary-errors')

In your case, you may check for .hasClass('field-validation-error')

Otherwise, if you have multiple forms( one on each tab) you can also use this

$("#frmSummary").submit(function ()
{
    var tabStrip = $('.t-widget.t-tabstrip.t-header').data('tTabStrip');
    var element = $("li", tabStrip.element);

    if (!$("#frm0").valid())
    {
        tabStrip.select(element[0]);
    }
    else if (!$("#frm1").valid())
    {
        tabStrip.select(element[1]);
    }
    else if (!$("#frm2").valid())
    {
        tabStrip.select(element[2]);
    }
    else
    {
        return true;
    }
    return false;
});

[Juan Pablo Perez]

Hello,

Did you solve the problem? What about if you have only one form divided in different tabs and the error is in one on more than one of the tabs, how can you go to the first tab with errors. Also, how can you make sure there are not errors in the current tab to avoid to pass to another one?.

Thank you very much in advance.

Juan Pablo Pérez

[Patrick]

Hi Juan,
Did you find a solution for this problem? I would realy like to implement it myself...
Patrick

[accacc]

 $("#myForm").submit(function () {
            var $firstError = $('#myForm.input-validation-error').first();

            if ($firstError.size() === 1) {
                var id = $firstError.parents('.t-content').attr('id');

                var tabStrip = $("#TabStrip").data("tTabStrip");

                tabStrip.select($(".t-item", tabStrip.element)[parseInt(id.replace(/TabStrip-/, '')) - 1]);
            }
        });

        OR


         $(function () {
        $('#myForm').bind("invalid-form.validate", function () {
            
            $('#myForm').validate().showErrors();

            var $firstError = $('#myForm.input-validation-error').first();

            if ($firstError.size() === 1) {
                
                var id = $firstError.parents('.t-content').attr('id');
                var tabStrip = $("#TabStrip").data("tTabStrip");
                tabStrip.select($(".t-item", tabStrip.element)[parseInt(id.replace(/TabStrip-/, '')) - 1]);
            }
        });
    });