我在试图让不显眼的jQuery验证与通过AJAX调用动态加载的局部视图时出现问题。
我已经花了几天试图让这个代码没有运气的工作。
这里的景观:
@model MvcApplication2.Models.test
@using (Html.BeginForm())
{
@Html.ValidationSummary(true);
<div id="res"></div>
<input id="submit" type="submit" value="submit" />
}
局部视图:
@model MvcApplication2.Models.test
@Html.TextAreaFor(m => m.MyProperty);
@Html.ValidationMessageFor(m => m.MyProperty);
<script type="text/javascript" >
$.validator.unobtrusive.parse(document);
</script>
该模型:
public class test
{
[Required(ErrorMessage= "required field")]
public int MyProperty { get; set; }
}
该控制器:
public ActionResult GetView()
{
return PartialView("Test");
}
最后,的JavaScript:
$(doument).ready(function () {
$.ajax({
url: '/test/getview',
success: function (res) {
$("#res").html(res);
$.validator.unobtrusive.parse($("#res"));
}
});
$("#submit").click(function () {
if ($("form").valid()) {
alert('valid');
return true;
} else {
alert('not valid');
return false;
}
});
验证不起作用。 即使我不填写texbox的任何信息,提交事件显示警报(“有效”)。
然而,如果不是动态加载的观点,我使用@Html.Partial("test", Model)
来呈现主视图的局部视图(我不这样做的AJAX调用),那么验证工作得很好。
这可能是因为,如果我动态加载的内容,该控件不会在DOM存在呢。 但我做的一个电话$.validator.unobtrusive.parse($("#res"));
这应该是足以让有关新加载的控件验证...
任何人都可以帮忙吗?
如果试图解析已被解析它不会更新表单
当您添加动态元素的形式或者是你可以做什么
你能清除表格的验证和重新验证它是这样的:
var form = $(formSelector) .removeData("validator") /* added by the raw jquery.validate plugin */ .removeData("unobtrusiveValidation"); /* added by the jquery unobtrusive plugin*/ $.validator.unobtrusive.parse(form);
访问形式的unobtrusiveValidation
使用jQuery数据data
的方法:
$(form).data('unobtrusiveValidation')
然后访问规则集,并添加新的元素属性(这有点复杂)。
您还可以看看这篇文章运用不显眼的jQuery验证在ASP.Net MVC动态内容的用于添加动态元素的形式的插件。 该插件使用第二个解决方案。
作为除了纳迪姆Khedr的答案....
如果你已经在你的DOM加载的形式动态,然后调用
jQuery.validator.unobtrusive.parse(form);
(有额外的比特提到的),然后将提交该表格用ajax记得打电话
$(form).valid()
返回true或false(和运行实际验证)您提交表单之前。
添加到您的_Layout.cshtml
$(function () {
//parsing the unobtrusive attributes when we get content via ajax
$(document).ajaxComplete(function () {
$.validator.unobtrusive.parse(document);
});
});
测试:
if ($.validator.unobtrusive != undefined) {
$.validator.unobtrusive.parse("form");
}
出人意料的是,当我看到这个问题,官方ASP.NET文档仍然没有对不显眼的任何信息parse()
方法或如何与动态内容使用它。 我把创建的自由问题,在文档回购(参考@纳迪姆原来的答案),并提交pull请求进行修复。 此信息现在在可见光客户端验证模型验证话题的部分。
我被袭击了同样的问题,除了这个没有什么工作:
$(document).ready(function () {
rebindvalidators();
});
function rebindvalidators() {
var $form = $("#id-of-form");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse($form);
$form.validate($form.data("unobtrusiveValidation").options);
}
并添加
// Check if the form is valid
var $form = $(this.form);
if (!$form.valid())
return;
在那里你试图保存表单。
我是通过节约Ajax调用的形式。
希望这会帮助别人。
只是在模态代码结束时再次复制此代码
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
;)