jquery validate form 异步提交
jQuery取得select选中的值
jQuery("#select1 option:selected").text();
相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则
// 电话号码验证
jQuery.validator.addMethod("isPhone", function(value, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}(-?\d{1,4})?$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
验证通过,表单提交。但我们常常会碰到这样的需求,当验证通过后,我不需要通过submit form的方式提交表单,我想要更灵活的通过ajax处理表单,加入很多动态的效果,提高客户体验,请看下面的例子:
有一个表单:
<form id="formId" action="">
姓名:<input type="text" name="name">
电话:<input type="text" name="phone">
<input type="button" value="submit" onclick="doSubmit();">
</form>
以下是JS:
function doSubmit() {
validateForm();//调用验证方法
//do something else...
}
function validateForm() {
var validator = $("#formId").validate({
errorElement: "em",
success: function(em) {
em.text("ok").addClass("success");//验证通过的动态CSS
},
submitHandler:function() {
ajaxSubmitForm();
},//这是关键的语句,配置这个参数后表单不会自动提交,验证通过之后会去调用的方法
rules: {
name: {
required: true,
maxlength: 100
},
phone: {
isPhone: true
}
},
messages: {
name: {
required: "请填写姓名",
maxlength: "姓名不超过100个字符"
}
}
});
}
function ajaxSubmitForm() {
var para = ;//组织参数
var url = "/jajax/saveForm.do";
$.ajax({
type: "post",
cache: false,
dataType: "json",
url: url,
data: para,
beforeSend: function(XMLHttpRequest){
//do something before submit...
},
success: function(data, textStatus){
//do something after submited...
},
complete: function(XMLHttpRequest, textStatus){
//do something in the end...
}
});
}
jquery validate form 异步提交的更多相关文章
- 基于Bootstrap+jQuery.validate Form表单验证实践
基于Bootstrap jQuery.validate Form表单验证实践 项目结构 : github 上源码地址:https://github.com/starzou/front-end- ...
- 使用jquery.form异步提交注意jquery.validate需要手动添加验证
使用jquery.form.js异步提时,即使jquery.validate验证失败也会提交的所以加个$("form").valid()来判断是否通过验证: $("#fo ...
- jquery validate不用submit提交,用js提交的
jquery validate控件 默认是使用submit提交的, 要想改成使用button的click事件处理函数中手工提交, 可以按照如下方式操作: 1 绑定form的validate, 2 然后 ...
- jQuery——表单异步提交
如果不做任何处理,表单提交时会刷新页面,为了改善体验,可以使用jQuery做到异步提交表单:通过$("#form").serialize()将表单元素的数据转化为字符串,然后通过$ ...
- jquery validate如何不提交表单就做验证(ajax提交数据)
if($("#FromID").valid()){ $.ajax({ type:'post', url:'/CampaignOrderRelations/save', data:{ ...
- jquery validate 在ajax提交表单下的验证方法
$(function() { var method='${method }'; if(method == 'edit'){ url="${ctx}/commodity/typeReN ...
- Jquey Form 异步提交文件参数并且在http 信息头header中加上一定参数
1.下载jQuery.Form 包 官网下载:http://jquery.malsup.com/form/#download 2.模拟代码: <!DOCTYPE html> <htm ...
- amazeui表单form异步提交方法
// 留言提交 $(function() { var $form = $('#ue-form'); $form.validator({ validateOnSubmit: true, submit: ...
- jQuery - 几种异步提交方式
$.post(url,params,callback); $.post("${ctx}/role/grant", {userId : $("#userId"). ...
随机推荐
- Html5所见即所得的几款框架
http://www.csdn.net/article/2013-10-21/2817243-8-useful-html5-frameworks
- drop,delete,truncate
drop,truncate是ddl,数据库定义语言,不执行事务 delete是dml,数据库操作语言,有事务 drop:删除内容和定义,释放空间 delete:删除内容,不删除定义,不释放空间 tru ...
- pcduino连接OTG登录远程桌面
由于没有HDMI的显示屏,为了方便起见,使用了pcduino的OTG来连接到虚拟桌面,可是发现连接上虚拟桌面后,电脑的外网就断了.下面这个方法让你既可以连接到pcduino,又可以让电脑能上外网. 打 ...
- cf C. Purification
http://codeforces.com/contest/330/problem/C 这道题分三种情况.有一行全是E,有一列全是E,还有一种为无解的情况. #include <cstdio&g ...
- cf B. Road Construction
http://codeforces.com/contest/330/problem/B这道题可以围着一个可以与任何一个城市建路的城市建设. #include <cstdio> #inclu ...
- hdu 畅通工程
http://acm.hdu.edu.cn/showproblem.php?pid=1863 #include <cstdio> #include <cstring> #inc ...
- poj1740 A New Stone Game
题意:对于n堆石子,每堆若干个,两人轮流操作,每次操作分两步,第一步从某堆中去掉至少一个,第二步(可省略)把该堆剩余石子的一部分分给其它的某些堆. 真是好♂题,代码不长就是好♂题. 首先考虑两堆相同的 ...
- 必须用C模拟OS?
ASM基本必要,至于高级语言就很难说了.去osdev wiki上一翻一堆各种语言实现的玩意. 一个模拟OS其实不太容易完整搭出来,反倒是直接构造内核的后顾之忧少(如果还有真的想在SIGALRM里耍什么 ...
- ACM2136
/* Problem Description Everybody knows any number can be combined by the prime number. Now, your tas ...
- openSourceEvent
开放源码(开源)的精神在于使用者可以使用.复制.散布.研究和改进软件.这可以追溯到20世纪60年代,至今已有半个世纪了.虽然下面所列举的不都是专门的开源产品,但还是在开源发展的进程中有着巨大的影响. ...