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

Question

首先，我读了这个question已经，但它没有回答我的问题。

假设我有一个模型:

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

   public string Text { get; set; }
}

和部分 View _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>

返回部分 View 的操作

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

我通过 ajax 调用该 View

$.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调用该 View ，并且我使用Html.RenderPartial('_MyForm', new MyModel())在 View 中然后它就可以工作了。

换句话说，如果该部分 View 正常渲染(通过调用 RenderPartial )，则验证有效，如果通过 ajax 渲染，则验证不起作用。

为什么？我没有错误，我记录了 html参数来自success功能好像还可以。

Answer 1

这很常见，当 View 正常加载时，当验证器绑定(bind)时输入出现在 dom 中。

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

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

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

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