773
如何解決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按鈕提交表單後，輸入的數據並不會被驗證（客戶端驗證）。為了解決這個問題，可以在動態注入表單之後按照如下的方式調用對表單元素進行重新解析。
1: $(function () {
2: $("body #updateContact").load("home/update/001", null, function () {
3: $("form").removeData("validator").removeData("unobtrusiveValidation");
4: $.validator.unobtrusive.parse($("form"));
5: });
6: })
再次運行程序，客戶端驗證將會生效：
作者：蔣金楠
微信公眾賬號：大內老A
微博：www.weibo.com/artech
如果你想及時得到個人撰寫文章以及著作的消息推送，或者想看看個人推薦的技術資料，可以掃描左邊二維碼（或者長按識別二維碼）關注個人公眾號（原來公眾帳號蔣金楠的自媒體將會停用）。
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁麵明顯位置給出原文連接，否則保留追究法律責任的權利。
微信公眾賬號：大內老A
微博：www.weibo.com/artech
如果你想及時得到個人撰寫文章以及著作的消息推送，或者想看看個人推薦的技術資料，可以掃描左邊二維碼（或者長按識別二維碼）關注個人公眾號（原來公眾帳號蔣金楠的自媒體將會停用）。
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁麵明顯位置給出原文連接，否則保留追究法律責任的權利。
最後更新：2017-10-25 16:04:14