我在尝试让不显眼的 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;
}
});
验证不起作用。即使我没有在文本框中填写任何信息,提交事件也会显示警报(“有效”)。
但是,如果我不是动态加载视图,而是使用
@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);
使用jquery
unobtrusiveValidation
方法访问表单的data
数据:
$(form).data('unobtrusiveValidation')
然后访问规则集合并添加新的元素属性(这有点复杂)。
您还可以查看这篇文章 将不显眼的 jquery 验证应用于 ASP.Net MVC 中的动态内容,了解用于向表单添加动态元素的插件。该插件使用第二种解决方案。
作为 Nadeem Khedr 答案的补充......
如果您已将表单动态加载到 DOM 中,然后调用
jQuery.validator.unobtrusive.parse(form);
(提到了额外的位)然后将使用 ajax 提交该表单,记得调用
$(form).valid()
在您提交表单之前返回 true 或 false(并运行实际验证)。
令人惊讶的是,当我查看这个问题时,ASP.NET 官方文档仍然没有任何关于不显眼的
parse()
方法或如何将其与动态内容一起使用的信息。 我冒昧地在文档存储库中创建了一个“问题”(引用@Nadeem 的原始答案)并提交了一个拉取请求来修复它。 此信息现在可以在模型验证主题的客户端验证部分中看到。
$(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");
}
$(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>
;)
resetUnobtrusiveValidation: function (form) {
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);
}
let $form = $("#funding-information");
$form.removeData('validator');
$form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('#funding-information');
if (!$('#funding-information').valid()) {
return false;
}