如何解决jQuery Validation针对动态添加的表单无法工作的问题？

本文转载至：

作者： Leo_wl

出处： http://www.cnblogs.com/Leo_wl/

 

为了充分利用ASP.NET MVC在服务端呈现HTML的能力，在《利用动态注入HTML的方式来设计复杂页面》一文中介绍了，通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案。我们知道ASP.NET MVC默认集成了jQuery Validation，但是对于通过JavaScript动态添加的表单，客户端验证默认情况下是失效的。 还是以前文涉及的“联系人管理”为例，在一个ASP.NET MVC应用中定义了如下两个类型，Contact封装联系人信息，HomeController包含三个Action，除了默认Index外，两个Update方法用于修改指定的联系人信息。 1: public class Contact 2: { 3: [Required] 4: public string Id { get; set; } 5: [Required] 6: public string FirstName { get; set; } 7: [Required] 8: public string LastName { get; set; } 9: [Required] 10: [DataType(DataType.EmailAddress)] 11: public string EmailAddress { get; set; } 12: [Required] 13: [DataType(DataType.PhoneNumber)] 14: public string PhoneNo { get; set; } 15: } 16: 17: public class HomeController : Controller 18: { 19: private static List contacts = new List 20: { 21: new Contact{Id = "001", FirstName = "San", LastName = "Zhang", EmailAddress = "[email protected]", PhoneNo="123"}, 22: new Contact{Id = "002", FirstName = "Si", LastName = "Li", EmailAddress = "[email protected]", PhoneNo="456"} 23: }; 24: 25: public ActionResult Index() 26: { 27: return View(); 28: } 29: 30: [HttpGet] 31: public ActionResult Update(string id) 32: { 33: return View(contacts.First(c => c.Id == id)); 34: } 35: 36: [HttpPost] 37: public ActionResult Update(Contact contact) 38: { 39: //省略操作 40: } 41: } 如下所示的是Action方法Update对应的View（Update.cshtml）的定义，这是一个Model类型为Contact的强类型View，指定的联系人信息以编辑状态呈现在一个表单中： 1: @model Contact 2: @{ 3: Layout = null; 4: } 5: @using (Html.BeginForm()) 6: { 7: @Html.EditorForModel() 8: 9: } 默认Action方法Index对应的View（Index.cshtml）具有如下定义，页面主体内容是在加载的时候通过Ajax方法访问Action方法Update获取的。 1: 2: 3: 4: 5: 6:

 

7: 8: 9: 10: 16: 17: 遗憾的是，运行程序后点击Save按钮提交表单后，输入的数据并不会被验证（客户端验证）。为了解决这个问题，可以在动态注入表单之后按照如下的方式调用$.validator.unobtrusive.parse()对表单元素进行重新解析。 1: $(function () { 2: $("body #updateContact").load("home/update/001", null, function () { 3: $("form").removeData("validator").removeData("unobtrusiveValidation"); 4: $.validator.unobtrusive.parse($("form")); 5: }); 6: }) 再次运行程序，客户端验证将会生效： 作者：Artech 出处：http://artech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 分类: [02] 编程技巧