I came across this scenario whereby my main View uses Ajax posts to retrieve PartialViews and delivers the markup of the PartialView into my View. I use the jQuery validation framework to implement client side unobstrusive validation.

When I tried to validate my form that had been loaded into the page via an Ajax call, the validation did not appear to be working, my form simply posted. As it turns out, the unobstrusive jQuery validator library parses the markup of a page after it has finished loading for all the validation rules on the page. The result is, jQuery doesn’t know that the dynamically added markup has any validation rules resulting in no validation errors being thrown on post.

Solution

Luckily there is a method that is publicly accessible in the unobstrusive jQuery library which you can call, which will force the parser to scan the markup you just loaded. To do this you need to add the following code to the PartialView (or other dynamically loaded content)

12345
//this code goes in your partialview
$(function(){
//allow the validation framework to re-prase the DOM
jQuery.validator.unobtrusive.parse();
});
view rawgistfile1.jsThis Gist brought to you by GitHub.       

Then in your parent page you can handle the form submission and check the form is valid like this;

12345678
//then in your parent page handle the form submission
$(function(){
$("#SubmitButton").click(function(){
if (!$("#Form1").valid()){
return false;
}
});
});

MVC client validation after PartialView loaded via Ajax MVC3中 弹出 Dialog时候 提交的时候 使用 Jquery 不验证 form表单 的解决办法的更多相关文章

  1. Jquery来对form表单提交(mvc方案)

    来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来 ...

  2. Easyui Ajax验证Form表单。。。

        今天做项目用到easyui Ajax验证表单.本想自定义一个easyui的验证,查资料发现easyui 自带了一个通用的验证!见以下下截图. 后台返回值 true验证通过,返回false验证失 ...

  3. 【jQuery】将form表单通过ajax实现无刷新提交

    //将form转换为AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, t ...

  4. Ajax模拟Form表单提交,含多种数据上传

    ---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...

  5. Jquery通过Ajax方式来提交Form表单

    今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...

  6. MVC中Form表单的提交

    概述 Web页面进行Form表单提交是数据提交的一种,在MVC中Form表单提交到服务器.服务端接受Form表单的方式有多种,如果一个Form有2个submit按钮,那后台如何判断是哪个按钮提交的数据 ...

  7. ajax传递数组、form表单提交对象数组

    在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...

  8. Django学习系列之Form表单结合ajax

      Forms结合ajax Forms的验证流程: 定义用户输入规则的类,字段的值必须等于html中name属性的值(pwd= forms.CharField(required=True)=<i ...

  9. form表单和ajax表单提交(Html.BeginForm()、Ajax.BeginForm())的差别

    有如下几种区别: 1. Ajax在提交.请求.接收时,都是异步进行的,网页不需要刷新: Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的: 2. A在提交时,是在后台新建一个请 ...

随机推荐

  1. iOS多工程依赖

    导入准备工作 1.建立一个Framework & Library->Cocoa Touch Static Library 取名A,并在A里新建一个类用来测试 2.建立一个demo工程B ...

  2. 【单片机通信协议】CAN总线基础知识

    CAN总线基础知识(一) 1.1 CAN总线是什么? CAN(Controller Area Network)是ISO国际标准化的串行通信协议.广泛应用于汽车.船舶等.具有已经被大家认可的高性能和可靠 ...

  3. 开发错误日志之FTP协议传输文件问题

    从开发端用FTP协议向服务器(Linux系统)传输文件时,cat -A查询文件内容中行尾会有^M出现. 解决方案:改用SFTP协议上传文件.

  4. WPS目录制作方法

    学校安排我进行电子技术校本教材的后期制作,汇总完全部文字后,需要编辑一个全书目录,进过一番摸索,使用WPS2009圆满完成了此次任务,愿与诸君共享. 1.显示大纲工具栏 打开“视图”——“工具栏”—— ...

  5. POJ 3321 Apple Tree(树状数组)

    点我看题目  题意 : 大概是说一颗树有n个分岔,然后给你n-1对关系,标明分岔u和分岔v是有边连着的,然后给你两个指令,让你在Q出现的时候按照要求输出. 思路 :典型的树状数组.但是因为没有弄好数组 ...

  6. [dp]HDOJ4960 Another OCD Patient

    题意: 给一个n, 第二行给n堆的价值v[i], 第三行给a[i].  a[i]表示把i堆合在一起需要的花费. 求把n堆变成类似回文的 需要的最小花费. 思路: ①记忆化搜索 比较好理解... dp[ ...

  7. [topcoder]SmartWordToy

    广度搜索BFS,要用Queue.还不是很熟,这道题帮助理清一些思绪了.其实这道题是求最短路径,所以BFS遇到第一个就可以返回了,所以后面有些现有大小和历史大小的判断可以省却. 过程中拿数组存step还 ...

  8. Android USB Host 通信程序

    换到了一家新公司,于是就有了新的项目.这次的项目 要用Android SDK与USB HID设备进行通信.第一次接触Android SDK,以及USB,记录下源程序.开发过程以及一些心得. 首先,要感 ...

  9. [Quick-x]移动CCEditbox的父对象导致输入框位置偏移问题

    CCEditbox对象添加到某个layer,当layer移动时候,editbox输入状态下输入光标保持在原位,看起来就是光标发生了偏移 如果开始时添加的editbox不在屏幕内的话,光标会出现在屏幕边 ...

  10. Eclipse问题解决方案,不断更新

    执行“software update”时出现:Error retrieving "feature.xml"... 执行“software update”时出现:Error retr ...