Question

我有以下结构：
- 我有一个Razor视图，有一个Controller和一个ViewModel - 一个Razor视图将模拟它将由不同的页面组成，并且您可以在这些页面之间切换 - 我使用了以下示例... http://www.99points.info/2010/08/create-sexy-animated-tabs-using-jquery-and-css/ - 这对我来说可以。它使用jQuery和DIV。如果我单击选项卡2，则隐藏选项卡1和选项卡3的DIV。所有DIV都低于同样的水平表单以“Html.BeginForm”开头（new {ReturnUrl = ViewBag.ReturnUrl}）“。我在DIV中使用输入元素而不是文本。选项卡旁边有一个提交按钮，它总是在页面上可见。我使用@ Html.ValidationMessageFor（...）来验证输入用户。

enter image description here

    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();
    }

备注：a，b和c是DIV（又称容器）。

我现在有以下问题：
- 我想为那些包含输入元素的DIV红色的Tab按钮着色，其中@ Html.ValidationMessageFor（...）在用户输入丢失或错误时自动应用CSS类“.input-validation-error”点击“提交”按钮。我使用以下jQuery脚本（类buttonsError只是将选项卡颜色为红色）：

    $("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');
        }
    });

它对目前显示的Tab和DIV起作用，但它不适用于隐藏DIV的其他两个Tab。如果我先点击它们，它只适用于其他标签及其DIV。但它隐藏时也适用于DIV。用户不必首先单击每个Tab以查看哪个DIV包含错误。如果我查看客户端Web浏览器的HTML源代码，所有输入元素都在后台，并且应该可以进行验证。

我的问题：
模型验证是否仅适用于显示的输入元素？如何使其适用于当前未显示的输入元素？有人知道ASP.NET MVC的模型验证如何在这里工作吗？有人知道解决方法吗？

非常感谢提前!!!

编辑：
解决方案现在看起来像这样......

    $.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');
            }
        }
    });

非常感谢!!!它现在完美无缺。

ASP.NET MVC 4 - 模型验证仅适用于可见/显示的元素？

0 个答案: