jquery客户端验证在MVC3部分视图中不起作用答案

【问题标题】：jquery client side validation not working in MVC3 partial viewjquery客户端验证在MVC3部分视图中不起作用
【发布时间】：2012-12-17 13:57:28
【问题描述】：

我似乎无法使用以下部分视图进行客户端验证工作。此视图位于父视图的 divTSettings div 内。从stackoverflow和其他网站尝试了很多东西，似乎没有任何效果。有任何想法吗？

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>


@using (Ajax.BeginForm("CreateT", "TAdmin", null,
        new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divTSettings"},
                       new { id = "CreateTForm" }))
{
    <div>
        <label>Name:</label>
        <input type="text" name="tName" id="tName"/>
        @Html.ValidationMessage("tName")
        <input type="submit" value="Submit"/>
    </div>
}

<script type="text/javascript">
$(function() {
    $('#CreateTForm').validate({
        rules: {
            tName: {
                required: true
            }
        },
        messages: {
            tName: {
                required: 'Name required'
            }
        }
    });
    $("#CreateTForm").removeData("validator");
    $("#CreateTForm").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse("#CreateTForm");
});
</script>

【问题讨论】：

标签： jquery asp.net-mvc-3 jquery-validate

【解决方案1】：

有什么想法吗？

是的，您应该做的第一件事就是从您的局部视图中删除所有那些<script> 标记。部分视图不应包含任何脚本。部分视图应该只包含标记。我已经重复了很多次，但仍然看到人们将脚本放在那里。脚本应该在您的布局或渲染部分的主视图中注册，可能通过覆盖在您的布局中注册的一些脚本部分，以便所有脚本都插入到 HTML 文档的末尾，就在关闭 @987654322 之前@ 标签。那是他们所属的地方。

好的，现在来解决实际问题：不显眼的验证在动态添加到 DOM 的元素时无法开箱即用 - 例如向服务器发送 AJAX 请求，该请求会返回部分视图，而这然后将局部视图注入到 DOM 中。

为了使其工作，您需要使用不显眼的验证框架注册这些新添加的元素。为此，您需要在新添加的元素上调用 $.validator.unobtrusive.parse：

$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");

您应该将此代码放在将部分注入您的 DOM 的 AJAX 成功处理程序中。注入新元素后，只需调用此函数即可。

如果您不是使用 jQuery（$.ajax、$.post、...）手动编写 AJAX 请求，而是依靠一些 Ajax.BeginForm 和 Ajax.ActionLink 助手为您完成这项工作，您将需要订阅 AjaxOptions 中的 OnSuccess 回调并将此代码放在那里。

【讨论】：

感谢您的回答，但局部视图不是由 AJAX 加载的，而是由父级使用父级的模型加载的。它使 AJAX 发布，但即使是第一次加载，验证也不起作用。如您所见，我有您在文档加载处理程序中提到的验证初始化。
哦，您不需要在 document.load 上进行这些初始化。您需要做的就是在您的页面中包含 jquery、jquery.validation 和 jquery.validation.unobtrusive 脚本。同样根据您显示的代码，您似乎订阅了表单的.validate 处理程序并声明了一些自定义验证。但这根本不是 ASP.NET MVC 和 jquery 非侵入式验证的工作方式。您确实必须在视图模型上使用数据注释（例如[Required] 属性）或完全定义自定义客户端验证规则之间做出选择。
@Amy，如果它解决了你的问题，别忘了“接受”这个答案。
太棒了。所以，重点是：“不显眼的验证不能开箱即用，动态添加元素到 DOM”需要调用“$.validator.unobtrusive.parse”
如果我使用@Html.Partial("CreditCardDetail_Partial") 会怎样？

【解决方案2】：

如果您想在全局级别进行修复，那么这应该会有所帮助。我在 _layout.cstml 使用过。

  $(document).ajaxStart(function () {
                $.ajaxSetup({
                    converters: {
                        "text html": function (textValue) {
                            if (textValue) {
                                // Some parsing logic here
                                var script = "<script type='text/javascript' language='javascript' > $.validator.unobtrusive.parse(\"form\");";
                                var scriptend = "\<\/script>";
                                return script + scriptend + " " + textValue;
                            } else {
                                // This will notify a parsererror for current request
                                throw exceptionObject;
                            }
                        }
                    }
                });
            });

【讨论】：