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

  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表单并提交到后台(携带一定的数据进行页面跳转)

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

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

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

  8. Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件

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

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

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

随机推荐

  1. 如何在 .Net Framework 4.0 项目上使用 OData？

    最新的 Microsoft ASP.NET Web API 2.1 OData 5.1.0 已只能在 .Net Framework 4.5 的安装了,如果要在 VS2010的 .Net Framewo ...

  2. 如何修改 SplendidCRM 页脚版权信息

    打开 SplendidCRM 网站中的Web Site\_controls\Copyright.ascx 文件找到这段代码<div id="divFooterCopyright&quo ...

  3. Rain on your Parade

    Rain on your Parade Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 655350/165535 K (Java/Ot ...

  4. BZOJ3735 : [Pa2013]Konduktorzy

    二分一个最大的位置$x$,计算$t=\sum_{i=1}^k\lfloor\frac{x}{a_i}\rfloor$. 如果$t\leq n$,那么说明就算全部检票员都走到了这里,也不够$n$个指令, ...

  5. HTML的快速写法：Emmet和Haml

    HTML代码写起来很费事,因为它的标签多. 一种解决方法是采用模板, 在别人写好的骨架内,填入自己的内容.还有一种就是我今天想要介绍的方法—-简写法. 常用的简写法,目前主要是Emmet和Haml两种 ...

  6. 密码等级：至少包含字母、大小写数字、字符中的两种 JS实现方案

    前言 密码,如果设置的太简单,很容易就被攻破,所以很多网站将密码设置的要求设置的挺严格,一般是字母.数字.字符3选2,区分大小写.对于设置得太简单的密码,予以错误提示.或者予以密码等级(低中高)显示, ...

  7. 【TYVJ】1467 - 通向聚会的道路（spfa+特殊的技巧）

    http://tyvj.cn/Problem_Show.aspx?id=1467 这题我并不是看题解a的.但是确实从题解得到了启发. 一开始我就想到一个正解,设d[i][0]表示i开始走过奇数个点的最 ...

  8. 【BZOJ】1084: [SCOI2005]最大子矩阵（DP）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1084 有一个1A--- 本题没看懂,,不会啊囧..感觉完全设不了状态..看了题解,囧,m<=2 ...

  9. HDU 2852 KiKi's K-Number(离线+树状数组)

    题目链接 省赛训练赛上一题,貌似不难啊.当初,没做出.离线+树状数组+二分. #include <cstdio> #include <cstring> #include < ...

  10. hdu-acm steps FatMouse's Speed

    本想用暴力法先试试的,案例和自己找的数据都过掉了,但是始终wa,本来期待的是tle,结果始终wa.所以也就懒的管了,直接用dp来做了.主要是因为最近在刷暴力法和dp这两个专题,所以才想好好利用一下这道 ...