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

时间：2022-06-28 20:11:07

为了充分利用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针对动态添加的表单无法工作的问题？

如何解决jQuery Validation针对动态添加的表单无法工作的问题？的更多相关文章

  1. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  2. javascript动态添加form表单元素

    2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主 ...

  3. Jquery Validation 多按钮，多表单，分组验证

    真正做到了 多按钮的验证. 在用户输入的时候就可以验证,而网上大部分多按钮验证都是必须要用户点击按钮后才可以验证. 研究了两天终于弄出来了,不知道两天是过长还是过段,现在分享给小伙伴们. 小伙伴们支持 ...

  4. Angular实现动态添加删除表单输入框功能

    <div class="form-group form-group-sm" *ngFor="let i of login"> <label c ...

  5. jquery mobile Checkbox动态添加刷新及事件绑定

    jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...

  6. jQuery动态创建form表单并提交到后台&lpar;携带一定的数据进行页面跳转&rpar;

    今天遇到这么一个需求,携带一个编号一个名字跳转到另一个JSP页面,直接页面跳转(get携带数据)的话不太安全,于是想到到后台转发一下. 第一种:直接以表单提交方式的进行 JS代码: var form ...

  7. C&num;中缓存的使用 ajax请求基于restFul的WebApi&lpar;post、get、delete、put&rpar; 让 &period;NET 更方便的导入导出 Excel &period;net core api &plus;swagger&lpar;一个简单的入门demo 使用codefirst&plus;mysql&rpar; C&num; 位运算详解 c&num; 交错数组 c&num; 数组协变 C&num; 添加Excel表单控件（Form Controls） C&num;串口通信程序

    C#中缓存的使用   缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可:  <%@ Outp ...

  8. Vue3组件（九）Vue &plus; element-Plus &plus; json &equals; 动态渲染的表单控件

    一个成熟的表单 表单表单,你已经长大了,你要学会: 动态渲染 支持单列.双列.多列 支持调整布局 支持表单验证 支持调整排列(显示)顺序 依据组件值显示需要的组件 支持 item 扩展组件 可以自动创 ...

  9. vue&plus;element创建动态的form表单&period;以及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v ...

随机推荐

  1. ASP&period;NET 一步步开发自己的博客 &period;NET版（11、Web&period;config文件的读取和修改）

    原文:http://www.cnblogs.com/zhaopei/p/5677053.html

  2. 网站图片优化-解码JPEG

    首先,老大拿了两个网站工具的分析跟我说,让我分析一下我们网站的图片有没有什么方法优化. [网站分析工具]webpage test: http://www.webpagetest.org/谷歌pages ...

  3. spring bean之间的关系：继承；依赖

    概要: ' 继承Bean配置 Spring同意继承bean的配置,被继承的bean称为父bean,继承这个父Bean的Bean称为子Bean 子Bean从父Bean中继承配置,包含Bean的属性配置 ...

  4. SQL Server-聚焦事务对本地变量、临时表、表变量影响以及日志文件存满时如何收缩（三十一）

    前言 接下来我们将SQL Server基础系列还剩下最后几节内容结束,后续再来讲解SQL Server性能调优,我们开始进入主题. SQL Server事务对本地变量影响 事务对变量影响具体是指什么意 ...

  5. 计算机网络——DNS协议的学习与实现

    1. 主要内容 不说废话,直接进入正题.先说说本文本文的主要内容,好让你决定是否看下去: 介绍DNS是干什么的: 介绍DNS是如何工作的: 介绍DNS请求与响应的消息格式: 编程实现一个简单的DNS服 ...

  6. css div 细边框

    .item{ max-width:48%; float:left; padding:2px; border-top:1px solid #000; border-left:1px solid #000 ...

  7. hdu 1004 颜色与数字（map水题）

    Sample Input5 //Tgreenredblueredred 统计颜色的次数 输出最多的颜色3pinkorangepink0 Sample Outputred pink # include ...

  8. collectd 检测cpu使用率

    环境配置 1. install epel https://www.cyberciti.biz/faq/installing-rhel-epel-repo-on-centos-redhat-7-x/ 2 ...

  9. SAS ODS GRAPHICS SGPLOT 画图 指存放定路径、名称、指定格式

    OPTION NOCENTER LS=MAX PS=MAX NODATE; LIBNAME S 'E:\00@Data'; PROC FREQ DATA=S.DATA00; TABLES CLE_DA ...

  10. solr 忽略大小写

    1.types标签下加入如下fieldType <fieldType name="str_lower" class="solr.TextField" so ...

相关文章