当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form在同一个页面的情况,但是提交一个表单以后不想页面刷新或者跳转,那么我们考虑到的就是Ajax提交表单,那么如何让Jquery的validator插件也可以对异步提交的表单进行验证呢?我们继续往下看。
在这里,我就用网络上的一个例子来说明好了。
下面是一个比较常见的jquery .ajax提交表单的写法
$("#submitButton").click(function(){
//序列化表单
var param = $("#leaveSave").serialize();
$.ajax({
url : "leaveSave.action",
type : "post",
dataType : "json",
data: param,
success : function(result) {
if(result=='success') {
location.href='allRequisitionList.action';
} else if(result.startWith("error_")){
$("#errorMessage").html(result.substring(6));
} else {
//返回的结果转换成JSON数据
var jsonObj = eval('('+result+')');
startTime = $("#startdate").val();
endTime = $("#enddate").val();
hour = jsonObj.hour;
reason = jsonObj.reason;
replaceDom(startTime,endTime,hour,reason);
}
}
});
});
如果想用ajax提交表单,还想用jquery的validate进行验证,那么可以这样解决:表单还是正常编写的表单内容,type还是submit类型,只不过在validate验证通过后的方法中使用ajax提交表单
$("#saveWorkExtra").validate({
onsubmit:true,// 是否在提交是验证
onfocusout:false,// 是否在获取焦点时验证
onkeyup :false,// 是否在敲击键盘时验证
rules: {
....
},
messages:{
....
},
submitHandler: function(form) { //通过之后回调
var param = $("#saveToWorkExtra").serialize();
$.ajax({
url : "workExtraChange.action",
type : "post",
dataType : "json",
data: param,
success : function(result) {
if(result=='success') {
location.href='allRequisitionList.action';
} else {
var jsonObj = eval('('+result+')');
}
}
});
},
invalidHandler: function(form, validator) { //不通过回调
return false;
}
});
分享到:
相关推荐
主要介绍了jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法,在文中还给大家提到了jquery .ajax提交表单的写法,具体实例代码大家参考下本
主要介绍了bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能的实现代码,非常不错,具有参考借鉴价值,需要的朋友参考下
支持Ajax验证,实现密码安全度等级验证及显示,5种配置方式,6种消息提示模式,能避免网络原因未完全下载validator.js时提交未经验证表单,避免变量名冲突 。已内含详细的帮助说明文档。
Validator jQuery版本的Ajax表单验证框架,适时判断是否输入正确的一个表单验证插件。包括常用的数字判断、是否允许字符串的判断、Email判断、字符字数限制等,包括大家常用的一些表单项目的判断,它是适时判断,即...
已经测试通过ie6+,ff,google等浏览器,使用比较建议,缺陷可能ajax验证的方式没有很强大,只适用简单的ajax验证,equals比较器尚有漏洞,所以请大家共同改进下这个框架,让我们的开发的时候验证表单更简单点,因为其他的很...
重置这里有bug,bootstrapValidator验证不能重置,待解决。 二、代码准备: 引入bootstrap,bootstrapValidator和jquery。 <link rel="stylesheet" href="<%=request.getContextPath() %>/css/...
表单验证Validator v4.0代码生成工具实在太好用啦,做表单验证的时候只要打开这个工具,勾上需要验证的属性一点生成按钮就可以把表单验证Validator v4.0代码生成,这样的话就可以僻免写错代码啦....
Validator框架是Struts自带的一个框架,能够进行数据输入的验证,能够针对不同的输入情况给出不同的错误提示信息,使用很方便。
表单验证、字段ajax验证 formValidator.1.7
4.0 功能特点 1.支持Ajax验证 2.实现密码安全度等级验证及显示 3.5种配置方式 4.6种消息提示模式 5.能避免网络原因未完全下载validator.js时提交未经验证表单的 6.避免变量名冲突 7.详细的帮助说明文档 8. ...
本文给大家介绍如何判断表单验证的实例...提交前验证表单: 更丰富一点的表单验证例子:http://www.jq22.com/yanshi522,直接上代码: <!DOCTYPE html> <html> <head> <title>BootstrapValid
jQuery form Validator Engine 表单输入判断验证插件,实时显示提示,当输入的数据不正确时,会给出提示,鼠标单击输入框时,也会显示出提示,比较人性化,不管是否输入,都会显示提示,这是一款来自jquery的输入...
内容索引:脚本资源,Ajax/JavaScript,JS表单验证,validator validator 通用JS表单验证类,JavaScript+XML,内含使用教程,很方便就可以嵌入到你的网页中。
对于Bootstrap而言,利用BootstrapValidator来做Form表单验证是个相当不错的选择,两者完全兼容,我们也不用去关注CSS样式等美工效果。 0x01 引入BootstrapValidator 官网:BootstrapValidator,作为一个纯粹的使用...
我在Django项目中看到了许多笨拙的AJAX表单验证实现,这是我尝试通过一些简单的设计模式来解决该问题的尝试。 本文旨在作为快速参考和展示。 该项目的目的是利用django的表单验证功能,而不必在JS中复制逻辑,同时...
网上书店(使用技术为JSP+Servlet+IBatis,完成前台功能...其中又用到了Tiles框架,Validator验证框架, Action采用DispatchAction, 所有的表单Bean采用动态验证表单(DynaValidatorActionForm)。 (仅供学习参考!)
通用JS表单验证类_validator实例演示,含有一个说明文档,本验证插件可对表单中常见的电话、字符、邮箱地址、网址、身份证号码、密码、年龄格式、IP格式等特殊的字符格式做出检测判断,避免用户提交到数据库的数据不...
使用技术为:Struts+Hibernate+Ajax, 其中又包括Tiles框架,Validator验证框架,使用DipatcherAction和动态验证表单(DynaValidatorActionForm) 只需要1分即可下载,希望大家顶起!!!!!!!! 顶起!!!!!!!!顶起!...