不显眼的validation不适用于dynamic内容

我有问题试图让不显眼的jQueryvalidation工作与通过AJAX调用dynamic加载的部分视图。

我花了好几天的时间试图让这个代码没有运气的工作。

这是观看:

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

validation不起作用。 即使我没有填写任何信息,提交事件显示警报(“有效”)。

但是,如果不是dynamic加载视图,我使用@Html.Partial("test", Model)在主视图中呈现局部视图(并且我不执行AJAX调用),那么validation工作就好。

这可能是因为如果我dynamic地加载内容,DOM中不存在控件。 但是我打电话给$.validator.unobtrusive.parse($("#res")); 这应该足以让validation器有关新加载的控件…

谁能帮忙?

5 Solutions collect form web for “不显眼的validation不适用于dynamic内容”

如果您尝试parsing已经parsing的表单,它将不会更新

将dynamic元素添加到表单时,您可以做什么

  1. 你可以删除表单的validation并重新validation它是这样的:

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

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

你也可以看看这篇文章应用不显眼的jqueryvalidationdynamic内容在ASP.Net MVC插件用于添加dynamic元素到窗体。 这个插件使用第二个解决scheme。

除了Nadeem Khedr的回答….

如果您已经将表单加载到您的DOMdynamic然后调用

 jQuery.validator.unobtrusive.parse(form); 

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

 $(form).valid() 

在提交表单之前返回true或false(并运行实际validation)。

添加到您的_Layout.cshtml

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

testing这个:

 if ($.validator.unobtrusive != undefined) { $.validator.unobtrusive.parse("form"); } 

令人惊讶的是,当我看到这个问题时,官方的ASP.NET文档仍然没有任何有关不显眼的parse()方法的信息,或者如何在dynamic内容中使用它。 我冒昧地在docs repo(引用@ Nadeem的原始答案)中提出一个问题,并提交一个pull请求来解决它。 此信息现在可在模型validation主题的客户端validation部分中看到。