jQuery多个选项卡+验证选择不会触发(MVC3 / Razor / VB)

时间:2013-02-26 05:27:29

标签: asp.net-mvc-3 jquery-validate jquery-ui-tabs unobtrusive-validation

我已使用a solution herewhich I've fiddled here)限制提交表单,直到填写完所有必填字段。

问题是当我在我的MVC3项目上运行时,正如我在Firebug上观察到的那样,它停止在下一个块的第三行开始。因此,解决方案不起作用。

    var validator = $("#myForm").validate();
    var tabs = $("#tabs").tabs({
        select: function(event, ui) { // Here.
            // The following lines are not executed.
            var valid = true;
            var current = $(this).tabs("option", "selected");
            var panelId = $("#tabs ul a").eq(current).attr("href");

有人可以告诉我为什么我的项目不会运行脚本的其余部分以及我应该怎么做才能修复它?谢谢!

在我的视图文件中

@ModelType SLC.Models.RegisterModel

// downloaded with NuGet
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var validator = $("#myForm").validate();
        console.log(validator);
        var tabs = $("#tabs").tabs({
            select: function (event, ui) {
                var valid = false;
                var current = $(this).tabs("option", "selected");
                var panelId = $("#tabs ul a").eq(current).attr("href");

                $(panelId).find("input").each(function () {
                    console.log(valid);
                    if (!validator.element(this) && valid) {
                        valid = false;
                    }
                });

                return valid;
            }
        });
    });
</script>
<link rel="stylesheet" href="@Url.Content("~/Content/themes/base/jquery-ui.css")" />

@Using Html.BeginForm("", "", Nothing, New With {.id = "myForm"})
    @Html.ValidationSummary(True, "Account creation was unsuccessful. Please correct the errors and try again.")
    @<div>
        <div id="tabs">
            <ul>
                <li><a href="#tab-1">1. Information</a></li>
                <li><a href="#tab-2">2. Information</a></li>
                <li><a href="#tab-3">3. Confirm</a></li>
            </ul>

            <div id="tab-1">
                // Some fields...
            </div>

            <div id="tab-2">
                // Some fields...
            </div>

            <div id="tab-3">
                // Some fields...

                <input type="submit" value="Register" />
            </div>
        </div>
    </div>
End Using

在我的布局模板文件

<head>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    // downloaded with NuGet
    <script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.0.js")" type="text/javascript"></script>
</head>

1 个答案:

答案 0 :(得分:0)

我发现了这个:

jQuery UI select方法特别是从1.10.0开始不推荐使用,所以它要么回到UI 1.9.2,要么重写代码。