正常的表单都是使用submit按钮来提交,jquery  validate插件可以方便的做表单验证。

做一个发送短信的功能,向目标表插入多条记录,界面采用ajax来提交表单,等待效果直接用ext的遮罩了。

但是如何验证却碰到问题。

解决方式很简单,表单跟正常表单一样,validate的submitHandler,invalidHandler这2个方法都需要覆盖,都 return false;这样表单就不会在点击按钮的时候提交了,表单验证跟正常验证起作用。submitHandler在return 之前写上我们的表单处理代码就ok了。

代码如下,可以忽略ext相关代码。

 //表单验证
$("#query").validate({
onkeyup : false,
onclick : false,
onfocusout : false,
rules : {
msg : {
required : true,
maxlength : 10
}
},
messages:{
msg:{
required : '请输入短信内容!',
maxlength : '长度超过10!'
}
},
showErrors : function(errorMap, errorList) {
var msg = "";
$.each(errorList, function(i,v){
msg += (v.message+"\r\n");
});
if(msg!="")
Ext.Msg.alert('表单',msg + fix);
},
invalidHandler : function(){
return false;
},
submitHandler : function(){
//表单的处理
Ext.Msg.confirm("确认", "是否确认发送?" + fix, function(button,text){
if(button == 'yes'){
loadMarsk.show();
$.ajax({
url:'<%=basePath %>promotionAction.do?method=group',
dataType:'json',
type:'post',
data:$('#query').serialize(),
error:function(){
Ext.Msg.alert('错误','请求错误!' + fix);
loadMarsk.hide();
},
success:function(data){
Ext.Msg.alert('成功',data.msg + fix);
loadMarsk.hide();
}
})
}
} ); //confirm
return false;//阻止表单提交
}
});

关键在于:validate的submitHandler,invalidHandler这2个方法都需要覆盖,都 return false;

转自:http://www.cnblogs.com/longterm/archive/2012/05/18/2507594.html

【转载】jquery validate验证插件,在ajax提交方式下的验证的更多相关文章

  1. jQuery通过jquery.form.js插件使用AJAX提交Form表单

    我简单使用了一下,jQuery Form插件有一下优点:  1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可. ...

  2. jquery.validate.js插件的使用方法

    近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...

  3. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  4. 用jQuery Validate+layer插件实现好看的表单提交效果

    作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...

  5. 使用jquery.validate.js插件进行表单里控件的验证

    jsp中具体实现的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  6. 【转载】[jquery.validate]自定义方法实现"手机号码或者固定电话"的逻辑验证

    最近项目开发中遇到这样的需求“手机号码或者固话至少填写一个”,如下图所示: 项目采用的jquery.validate.js验证组件,目前组件不支持这种“或”逻辑的验证,于是就自己定义一个 jQuery ...

  7. jquery.validate.js插件使用

    jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

  8. jQuery validate在没有校验通过的情况下拒绝提交

    下面通过一个简单的例子说明,这个问题,可能是很多人遇到的,验证不通过的时候,依然提交了表单. HTML <form class="survey" id="surve ...

  9. ajax提交表单无法验证easyui的验证选项(比如required等)

    在实际开发中,遇到ajax方式提交表单没法验证easyui的验证选项,这对实际用户体验造成了很大的困扰.当然,这也是理所当然的事情.   解决办法:使用jquery中ajax的beforeSend事件 ...

随机推荐

  1. 分享一个异步任务在遇到IO异常时支持递归回调的辅助方法

    public void TryAsyncActionRecursively<TAsyncResult>( string asyncActionName, Func<Task<T ...

  2. 《你必须知道的.NET》读书笔记二:小OO有大原则

    此篇已收录至<你必须知道的.Net>读书笔记目录贴,点击访问该目录可以获取更多内容. 一.单一职责原则 (1)核心思想:一个类最好只做一件事,只有一个引起它变化的原因 (2)常用模式:Fa ...

  3. Silverlight中文本框添加回车事件后,换行无法清除的解决方法

    在开发Silverlight的项目中,为了更好的用户体验,我们常要给一些控件添加一些快捷键.然而,在Silverlight中当用户回车提交后,光标停留在文本框的第二行怎么也清除不掉,经过一段时间研究, ...

  4. 假如现在有一堆长度大于3小于9的电话号码,用座机呼叫,如果出现这样的号码【123和12345】那么12345将永远不会被拨出,因为拨到123的时候电话已经呼出了,试写一个函数输出所有不能被呼出的电话号码(java实现)

    解题: 假如现在有一堆长度大于3小于9的电话号码,用座机呼叫,如果出现这样的号码[123和12345]那么12345将永远不会被拨出,因为拨到123的时候电话已经呼出了,试写一个函数输出所有不能被呼出 ...

  5. 使用Location对象查询字符串参数

    location是BOM中最有用的对象之一: 1.它提供了与当前窗口中加载的文档有关的信息: 2.他还提供了一些导航功能. location对象的属性有: hash, host, hostname, ...

  6. JS闭包中的this对象

    我们知道,当函数被作为某个对象的方法调用时,this等于那个对象,不过,匿名函数的执行环境具有全局性,因此其this对象通常指向window. 下面代码很好的说明了这一点: var name = 'T ...

  7. redis数据结构整理(二)

    摘要: 1.各个数据结构的应用举例 1.1 String类型应用举例 1.2List类型应用举例 1.3Set类型应用举例 1.4Sorted Set类型应用举例 1.5Hash类型应用举例 内容: ...

  8. Servlet过滤器,Servlet过滤器创建和配置

    第一:Servlet的过滤器的创建和配置,创建一个过滤器对象需要实现javax.servlet.Filter接口,同时实现Filter的3个方法.        第一方法是过滤器中的init()方法用 ...

  9. springSide部署出现AnnotationConfigUtils.processCommonDefinitionAnnotations(…) is not public!

    AnnotationConfigUtils.processCommonDefinitionAnnotations(…) is not public! Make sure you're using Sp ...

  10. JavaScript 对象的基本知识

    js对象和属性的基本定义 (function(){ $(document).ready(function(){ return "object define"; //创建对象实例 v ...