使用 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>

returns 局部视图

的操作

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");

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

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

Validate a form loaded in ajax using jQuery validation and MVC

ajax

jquery

asp.net-mvc-4