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

时间:2015-02-20 09:21:22

标签: jquery ajax asp.net-mvc-4

首先,我已经阅读了此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参数,似乎没问题。

1 个答案:

答案 0 :(得分:7)

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

当你通过ajax加载时,他们不是,所以他们不参与验证周期。

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

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

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