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

为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在《利用动态注入HTML的方式来设计复杂页面》一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案。我们知道ASP.NET MVC默认集成了jQuery Validation,但是对于通过JavaScript动态添加的表单,客户端验证默认情况下是失效的。

还是以前文涉及的“联系人管理”为例,在一个ASP.NET MVC应用中定义了如下两个类型,Contact封装联系人信息,HomeController包含三个Action,除了默认Index外,两个Update方法用于修改指定的联系人信息。

: public class Contact
: {
: [Required]
: public string Id { get; set; }
: [Required]
: public string FirstName { get; set; }
: [Required]
: public string LastName { get; set; }
: [Required]
: [DataType(DataType.EmailAddress)]
: public string EmailAddress { get; set; }
: [Required]
: [DataType(DataType.PhoneNumber)]
: public string PhoneNo { get; set; }
: }
:
: public class HomeController : Controller
: {
: private static List<Contact> contacts = new List<Contact>
: {
: new Contact{Id = "", FirstName = "San", LastName = "Zhang", EmailAddress = "zhangsan@gmail.com", PhoneNo=""},
: new Contact{Id = "", FirstName = "Si", LastName = "Li", EmailAddress = "zhangsan@gmail.com", PhoneNo=""}
: };
:
: public ActionResult Index()
: {
: return View();
: }
:
: [HttpGet]
: public ActionResult Update(string id)
: {
: return View(contacts.First(c => c.Id == id));
: }
:
: [HttpPost]
: public ActionResult Update(Contact contact)
: {
: //省略操作
: }
: }

如下所示的是Action方法Update对应的View(Update.cshtml)的定义,这是一个Model类型为Contact的强类型View,指定的联系人信息以编辑状态呈现在一个表单中:

: @model Contact
: @{
: Layout = null;
: }
: @using (Html.BeginForm())
: {
: @Html.EditorForModel()
: <input type="submit" value="Save" />
: }

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

 : <html>
: <head>
: <title>修改联系人信息</title>
: </head>
: <body>
: <div id="updateContact"></div>
: <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery-1.7..min.js")"></script>
: <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery.validate.min.js")"></script>
: <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery.validate.unobtrusive.min.js")"></script>
: <script type="text/javascript">
: $(function () {
: $("body #updateContact").load("home/update/001");
: });
: })
: </script>
: </body>
: </html>

遗憾的是,运行程序后点击Save按钮提交表单后,输入的数据并不会被验证(客户端验证)。为了解决这个问题,可以在动态注入表单之后按照如下的方式调用$.validator.unobtrusive.parse()对表单元素进行重新解析。

: $(function () {
: $("body #updateContact").load("home/update/001", null, function () {
: $("form").removeData("validator").removeData("unobtrusiveValidation");
: $.validator.unobtrusive.parse($("form"));
: });
: })

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

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

上一篇:http://codeforces.com/contest/828


下一篇:原生js动态添加新元素、删除元素方法