jquery客户端验证无法在MVC3局部视图中工作

I could not seem get client side validation work with the following partial view. This view is inside divTSettings div in the parent view. Tried lots of things from * and other sites, nothing seems to work. Any ideas?

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

<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>

2 个解决方案

#1

Any ideas?

有任何想法吗？

Yes, the very first thing you should do is to get rid of all those <script> tags from your partial view. Partial views should not contain any scripts. Partial views should contain only markup. I have repeated this many times and still see people putting scripts in-there. Scripts should be registered either in your Layout or the main View in which you have rendered the partial, probably by overriding some scripts section registered in your Layout so that all scripts get inserted into the end of your HTML document, just before the closing </body> tag. That's where they belong.

是的，您应该做的第一件事是从部分视图中删除所有这些

OK, now to the actual problem: unobtrusive validation doesn't work out-of-the-box with dynamically added elements to the DOM - such as for example sending an AJAX request to the server which returns a partial view and this partial view is then injected into the DOM.

好了，现在来看实际的问题：不显眼的验证不能在动态添加元素到DOM的情况下开箱即用 - 例如向服务器发送AJAX请求，返回局部视图，这个局部视图是然后注入DOM。

In order to make it work you need to register those newly added elements with the unobtrusive validation framework. To do this you need to call the $.validator.unobtrusive.parse on the newly added elements:

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

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

You should put this code inside the AJAX success handler that is injecting the partial into your DOM. Once you have injected the new elements simply call this function.

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

And if you are not writing your AJAX requests manually with jQuery ($.ajax, $.post, ...) but are relying on some Ajax.BeginForm and Ajax.ActionLink helpers do the job for you, you will need to subscribe to the OnSuccess callback in the AjaxOptions and put this code in there.

如果您不是使用jQuery（$ .ajax，$ .post，...）手动编写AJAX请求，但依赖于某些Ajax.BeginForm和Ajax.ActionLink帮助程序为您完成工作，则需要订阅AjaxOptions中的OnSuccess回调并将此代码放在那里。

#2

If you want to fix at global level then this should help. I used at _layout.cstml.

如果你想在全球范围内修复，那么这应该有所帮助。我在_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;
                            }
                        }
                    }
                });
            });

#1