使用jQuery验证和MVC验证在ajax中加载的表单

Question

首先,我已经阅读了这个问题,但它没有回答我的问题.

假设我有一个模型:

public class MyModel {
   [Required]
   public string Email { get; set; }

   public string Text { get; set; }
}

和部分视图_MyForm.cshtml:

@model MyModel
<form>
   @Html.LabelFor(m=>m.Email)
   @Html.TextBoxFor(m=>m.Email)
   <br />
   @Html.LabelFor(m=>m.Text)
   @Html.TextBoxFor(m=>m.Text)
  <br/>
   <input type="submit" value="submit" />
</form>

返回该局部视图的动作

public PartialViewResult GetView(){
   return PartialView("_MyForm", new MyModel());
}

我通过ajax调用该视图

$.ajax({
   url: "/Home/GetView",
   dataType: "html",
   success: function(html) {
       $("#aDiv").html(html);

       $("#aDiv :submit").on("click", function (){
           $(this).closest("form").validate({
              submitHandler: function (){  alert('valid'); }
           });
       }); 
   }
});

问题是,我没有填写电子邮件字段,而是显示警告对话框,以使电子邮件(这是必需的)字段带有红色边框.

如果我不使用ajax调用该视图,并且我Html.RenderPartial('_MyForm', new MyModel())在视图中使用它然后它工作.

换句话说,如果部分视图正常呈现(通过调用RenderPartial),那么验证工作,如果它通过ajax呈现,则验证不起作用.

为什么？我没有错误,我html从success函数中记录参数,似乎没问题.

Answer 1

这是很常见的,当视图正常加载时,当验证器绑定时,输入存在于dom中.

当您通过ajax加载时,它们不是,因此它们不参与验证周期.

您可以通过在ajax成功处理程序中调用此代码来让他们参与

$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");

这将把控件添加到验证周期