如何解决jQuery Validation针对动态添加的表单无法工作的问题?
时间:2022-04-21
本文章向大家介绍如何解决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: $("body #updateContact").load("home/update/001");
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: })
再次运行程序,客户端验证将会生效:
- WCF系列教程之WCF消息交换模式之单项模式
- React Native调用Android相机图库
- IntelliJ IDEA 之 HelloWorld 项目创建及相关配置文件介绍
- 设置 IntelliJ IDEA 主题和字体的方法
- 修改 IntelliJ IDEA 模板注释中的 user 内容
- Android仿京东、天猫商品详情页
- C# checked和unchecked运算符
- 迭代子模式
- WCF系列教程之WCF中的会话
- SortedList<TKey,TValue> 和 SortedDictionary<TKey,TValue>
- Spring Boot入门
- React Native在Android平台运行gif的解决方法
- WCF系列教程之WCF客户端异常处理
- 巧用Using跳过异常捕获
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法