ASP.NET MVC 4 - Model Validation only possible for visible/displayed elements?

Question

I have the following construct:
- I have a Razor view, with one Controller and one ViewModel.
- That one Razor view shall simulate that it would consist of different pages and that you can switch between those pages.
- I used the following example for it... http://www.99points.info/2010/08/create-sexy-animated-tabs-using-jquery-and-css/ - it works fine for me. It uses jQuery and DIVs. If I click on Tab 2, the DIVs of Tab 1 and Tab 3 are hidden. All DIVs run below the same form beginning with "Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })". I use input elements instead of text in the DIVs. There is a Submit button beside of the Tabs which is always visible on the page. I use @Html.ValidationMessageFor(...) to verify the inputs of the user.

    function navigate_tabs(container, tab) {
        $(".b").css('display', 'none');
        $(".c").css('display', 'none');
        $(".a").css('display', 'none');

        $("#first-tab").removeClass('buttonsHover');
        $("#second-tab").removeClass('buttonsHover');
        $("#third-tab").removeClass('buttonsHover');

        $("#" + tab).addClass('buttonsHover');
        $("." + container).show();
    }

Remark: a, b and c are the DIVs (aka container).

I have the following problem now:
- I would like to color the Tab buttons of those DIVs red which contain input elements where @Html.ValidationMessageFor(...) applied the CSS class ".input-validation-error" automatically when a user input was missing or wrong when I hit the Submit button. I use the following jQuery script for that (the class buttonsError just colors the Tabs red):

    $("form").submit(function () {
        $("#first-tab").removeClass('buttonsError');
        $("#second-tab").removeClass('buttonsError');
        $("#third-tab").removeClass('buttonsError');

        if ($(".a").find(".input-validation-error").length > 0) {
            $("#first-tab").addClass('buttonsError');
        }
        if ($(".b").find(".input-validation-error").length > 0) {
            $("#second-tab").addClass('buttonsError');
        }
        if ($(".c").find(".input-validation-error").length > 0) {
            $("#third-tab").addClass('buttonsError');
        }
    });

It works so far for the currently displayed Tab and DIV, but it doesn't work for the other two Tabs whose DIVs are hidden. It only works for the other Tabs and their DIVs if I click on them first. But it shall also work for the DIVs when they are hidden. The user shall not have to click on every Tab first to see which DIV contains the error. If I look into the HTML source code of the Client's web browser, all input elements are there in background and a validation should be possible.

My question:
Is the Model Validation only possible for displayed input elements? How can I get it work for input elements which are currently not displayed? Does someone know how the Model Validation of ASP.NET MVC works here? Does someone know a workaround?

Many thanks in advance!!!

EDIT:
The solution looks like this now...

    $.validator.setDefaults({
        ignore: []
    })

    $("form").submit(function () {
        $("#first-tab").removeClass('buttonsError');
        $("#second-tab").removeClass('buttonsError');
        $("#third-tab").removeClass('buttonsError');

        if ($(this).valid() == false) {
            if ($(".a").find(".input-validation-error").length > 0) {
                $("#first-tab").addClass('buttonsError');
            }
            if ($(".b").find(".input-validation-error").length > 0) {
                $("#second-tab").addClass('buttonsError');
            }
            if ($(".c").find(".input-validation-error").length > 0) {
                $("#third-tab").addClass('buttonsError');
            }
        }
    });

Many thanks!!! It works perfectly fine now.