asp.net-mvc-4 - 不引人注目的验证不适用于动态内容

Question

我在尝试让不显眼的 jquery 验证与通过 AJAX 调用动态加载的部分 View 一起使用时遇到问题。

我花了几天时间试图让这段代码正常工作，但没有成功。

这是 View :

@model MvcApplication2.Models.test

@using (Html.BeginForm())
{
 @Html.ValidationSummary(true);
 <div id="res"></div>
 <input id="submit" type="submit" value="submit" />
}

部分 View :

@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; }
  }

Controller :

    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;
    }
});

验证不起作用。即使我没有在文本框中填写任何信息，提交事件也会显示警报(“有效”)。

但是，如果我不使用动态加载 View ，而是使用 @Html.Partial("test", Model)在主视图中渲染部分 View (并且我不执行 AJAX 调用)，然后验证就可以正常工作。

这可能是因为如果我动态加载内容，则 DOM 中尚不存在控件。但我调用$.validator.unobtrusive.parse($("#res"));这应该足以让验证器了解新加载的控件...

有人可以帮忙吗？

Answer 1

如果您尝试解析已解析的表单，它将不会更新

当您向表单添加动态元素时，您可以执行以下操作:

1. 您可以删除表单的验证并重新验证它，如下所示:

   var form = $(formSelector)
       .removeData("validator") /* added by the raw jquery.validate plugin */
       .removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin*/
   
   $.validator.unobtrusive.parse(form);
   

2. 使用 jquery data 方法访问表单的 unobtrusiveValidation 数据:

   $(form).data('unobtrusiveValidation')
   

   然后访问规则集合并添加新的元素属性(这有点复杂)。

您还可以查看 Applying unobtrusive jquery validation to dynamic content in ASP.Net MVC 上的这篇文章用于向表单添加动态元素的插件。该插件使用第二种解决方案。