不引人注目的验证不适用于动态内容

Question

我在尝试使用不显眼的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")); ,应该足以让验证器关于新加载的控件......

有人可以帮忙吗？

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. unobtrusiveValidation使用jquery data方法访问表单的数据:

   $(form).data('unobtrusiveValidation')
   

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

您还可以查看有关将不显眼的jquery验证应用于ASP.Net MVC中的动态内容的文章,以获取用于向表单添加动态元素的插件.这个插件使用第二个解决方案.

Answer 2

作为Nadeem Khedr的答案的补充....

如果您已将表单动态加载到DOM中,然后调用

jQuery.validator.unobtrusive.parse(form); 

(提到额外的位),然后使用ajax提交该表单,记得打电话

$(form).valid()

在您提交表单之前返回true或false(并运行实际验证).

Answer 3

令人惊讶的是，当我查看这个问题时，官方 ASP.NET 文档仍然没有任何关于不显眼的parse()方法或如何将其与动态内容一起使用的信息。我冒昧地在文档存储库中创建了一个问题（参考@Nadeem 的原始答案）并提交了一个拉取请求来修复它。此信息现在在模型验证主题的客户端验证部分可见。

Answer 4

将其添加到_Layout.cshtml中

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });