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

Question

首先，我已经阅读了这个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 呈现，则验证无效。

为什么？我没有错误，我从success函数中记录了html参数，似乎还可以。

Answer 1

这很常见，当视图正常加载时，当验证器绑定时，输入存在于dom中。

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

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

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

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