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

为了充分利用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<Contact> contacts = new List<Contact>
  20:     {
  21:         new Contact{Id = "001", FirstName = "San", LastName = "Zhang", EmailAddress = "zhangsan@gmail.com", PhoneNo="123"},
  22:         new Contact{Id = "002", FirstName = "Si", LastName = "Li", EmailAddress = "zhangsan@gmail.com", 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:     <input type="submit" value="Save" />
   9: }

默认Action方法Index对应的View(Index.cshtml)具有如下定义,页面主体内容是在加载的时候通过Ajax方法访问Action方法Update获取的。

   1: <html>
   2:     <head>
   3:         <title>修改联系人信息</title>   
   4:     </head>
   5:     <body>  
   6:         <div id="updateContact"></div>
   7:         <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery-1.7.1.min.js")"></script>
   8:         <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery.validate.min.js")"></script>
   9:         <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery.validate.unobtrusive.min.js")"></script>
  10:          <script type="text/javascript">
  11:              $(function () {
  12:                  
  13:                  });        
  14:              })
  15:         </script>
  16:     </body>
  17: </html>

遗憾的是,运行程序后点击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: })

再次运行程序,客户端验证将会生效:

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


作者:蒋金楠
微信公众账号:大内老A
微博:www.weibo.com/artech
如果你想及时得到个人撰写文章以及著作的消息推送,或者想看看个人推荐的技术资料,可以扫描左边二维码(或者长按识别二维码)关注个人公众号(原来公众帐号蒋金楠的自媒体将会停用)。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
上一篇:搜狗开源业内最全「阅读理解工具集合」,助力研发人员快速构建高效模型


下一篇:ECS进阶第七天