在MVC3局部视图不工作jquery的客户端验证 [英] jquery client side validation not working in MVC3 partial view

问题描述

我似乎无法获得客户端验证工作，下面的局部视图。这种观点在里面父视图divTSettings格。试过很多来自计算器和其他网站的事情，似乎没有任何工作。有任何想法吗？

 ＆LT;脚本的src =@ Url.Content（〜/脚本/ jquery.validate.min.js）TYPE =文/ JavaScript的＆GT;＆LT; /脚本＆GT;
＆LT;脚本的src =@ Url.Content（〜/脚本/ jquery.validate.unobtrusive.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =@ Url.Content（〜/脚本/ jquery.unobtrusive-ajax.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
@using（Ajax.BeginForm（CreateT，TAdmin，空，
        新AjaxOptions {列举HTTPMethod =邮报，UpdateTargetId =divTSettings}，
                       新{ID =CreateTForm}））
{
    ＆LT; D​​IV＆GT;
        ＆LT;标签＆gt;名称：LT; /标签＆gt;
        ＆LT;输入类型=文本名称=TNAMEID =TNAME/＆GT;
        @ Html.ValidationMessage（TNAME）
        ＆LT;输入类型=提交值=提交/＆GT;
    ＆LT; / DIV＆GT;
}＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
    $（'＃CreateTForm'）。验证（{
        规则：{
            TNAME：{
                要求：真
            }
        }，
        消息：{
            TNAME：{
                要求：要求名称
            }
        }
    }）;
    $（＃CreateTForm）removeData（验证）;
    $（＃CreateTForm）removeData（unobtrusiveValidation）;
    $ .validator.unobtrusive.parse（＃CreateTForm）;
}）;
＆LT; / SCRIPT＆GT;
 

解决方案

  

任何想法？

是的，你应该做的第一件事就是要摆脱所有这些＆LT;脚本＆GT; 从局部视图标签。部分观点不应包含任何脚本。局部视图应该只包含标记。我已经重复了很多次，仍然看到人们把脚本在那里。脚本应该要么在你的布局，或在你所呈现的部分，可能是由覆盖在布局注册一些脚本段，因此所有脚本被插入到HTML文档的末尾主视图进行注册，结束<之前code>＆LT; /身体GT; 标记。这是属于他们的地方。

OK，现在实际的问题：不显眼的验证不工作外的开箱即用的动态添加元素的DOM - 例如发送一个AJAX请求到服务器返回的局部视图，这然后局部视图被注入到DOM

为了使它工作，你需要注册那些不显眼的验证框架新添加的元素。要做到这一点，你需要调用 $ validator.unobtrusive.parse 新添加的元素：

  $（形式）removeData（验证）;
$（形式）removeData（unobtrusiveValidation）;
$ .validator.unobtrusive.parse（形式）;
 

您应该把这个code是注射局部到您的DOM的AJAX的成功处理程序中。一旦你已经注入了新的元素简单地调用这个函数。

如果你不使用jQuery手动编写AJAX请求（$阿贾克斯，.post的$ ......），但都是依靠一些Ajax.BeginForm和Ajax.ActionLink助手为你做的工作，你将需要订阅在AjaxOptions中的onSuccess回调，并把这个code在那里。

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 stackoverflow and other sites, nothing seems to work. Any ideas?

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

解决方案

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.

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:

$("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.

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.

这篇关于在MVC3局部视图不工作jquery的客户端验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！