jquery validate ajax submit form
when the jquery validation plugin is used for validating the form data, such as below:
html code:
<form method="post" action="" id="buy-form" novalidate="novalidate">
<table style="margin:35px 150px 0 150px;">
<tr>
<td class="info-title">预定版本<input type="hidden" name="versionName" id="versionName" value="" /></td>
<td class="info-content-version">免费版本</td>
</tr>
<tr>
<td class="info-title">联系人</td>
<td class="info-content"><p><input class="required" type="text" placeholder="请输入联系人姓名(必填)" style="width:330px;" name="name" id="applicants-name" /></p></td>
</tr>
<tr>
<td class="info-title">电话</td>
<td class="info-content"><input type="text" placeholder="座机区号" style="width:100px;" name="locationNo" id="locationNo" /> - <input type="text" placeholder="座机号码/手机号码(必填)" style="width:209px;" name="phone" id="phone" /></td>
</tr>
<tr>
<td class="info-title">邮箱</td>
<td class="info-content"><input type="text" placeholder="请输入联系人邮箱地址(必填)" style="width:330px;" name="email" id="email" /></td>
</tr>
<tr>
<td class="info-title">公司名称</td>
<td class="info-content"><input type="text" placeholder="请输入联系人公司名称(必填)" style="width:330px;" name="companyName" id="companyName" /></td>
</tr>
</table>
</form>
js code:
var form = $("#buy-form");
form.validate({
errorElement: "span",
rules: {
"name": {
required: true
},
"phone": {
required: true
},
"email": {
required: true
},
"companyName": {
required: true
}
},
messages: {
"name": {
required: "请输入联系人姓名",
},
"phone": {
required: "请输入号码",
},
"email": {
required: "请输入邮箱地址",
},
"companyName": {
required: "请输入公司名称",
}
}
});
ajax submit code:
$(".submit").click(function(){
var form = $("#buy-form");
var $alertDialog = $("#alert-dialog");
form.submit(function (event) { event.preventDefault();});//阻止在数据校验失败的情况下提交表单;绑定事件,但不触发;
form.submit();//触发绑定事件;
var validator = form.validate();
if (validator.numberOfInvalids() <= 0) {//判断加入所有校验都通过后再做ajax提交;
$.ajax({
url: "Home/SubmitPurchaseApplication",
data: $("#buy-form").serialize(),
type: "post",
async: false,
success: function (data) {
freeDialog.dialog("close");
$("#alert-title h3").text("购买成功!");
$("#alert-message p").text("您的购买申请已经提交,我们会尽快联系您");
ShowAlertDialog(); //异步提交后弹框提示;
},
error: function () {
freeDialog.dialog("close");
$("#alert-title h3").text("购买失败!");
$("#alert-message p").text("您的购买申请出现异常,请重新申请");
ShowAlertDialog();
}
});
}
});
jquery validate ajax submit form的更多相关文章
- jquery实现ajax提交form表单的方法总结
本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一: function AddHandlingFeeToRefund( ...
- jQuery Validate Ajax 验证
jQuery Validate Ajax 验证 <script type="text/javascript"> $(function() { $('#formCityL ...
- 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...
- jquery.validate不用submit而用js提交的例子
$("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...
- jquery.validate ajax提交
页面引入jquery.validate.min.js <style> //引入错误格式 label.error { display: block; ma ...
- MVC4中 jquery validate 不用submit方式验证表单或单个元素
正确引入MVC4 jquery验证的相关文件 <script src="/Scripts/jquery-1.4.4.js"></script> <sc ...
- MVC中 jquery validate 不用submit方式验证表单或单个元素
<script src="/Scripts/jquery-1.4.4.js"></script> <script src="/Scripts ...
- jquery validate不用submit提交,用js提交的
jquery validate控件 默认是使用submit提交的, 要想改成使用button的click事件处理函数中手工提交, 可以按照如下方式操作: 1 绑定form的validate, 2 然后 ...
- jquery的ajax提交form表单方式总结
方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderServic ...
随机推荐
- remove adapter
Although adapter and other technical sequences can potentially occur in any location within reads, b ...
- R正则表达式的问题
今天在处理R的正则表达式的时候发现,R的正则式中的转义字符和linux.python等的还不一样. Linux是使用"\",而R中则使用"[]"! # 我想要将 ...
- CentOS 6.5设置静态IP教程 并且可以ping通
CentOS6.5掉电或重启,它的IP会被DHCP重新分配,如果要远程控制这台电脑,不得不去打开显示器去查看它的新IP,这样太麻烦了.于是需要将这台电脑的IP设置成静态的. 网上常规的设置静态ip的方 ...
- cocos2d Slider 透明滑动部件无法生成解决办法
用cocos studio 2.3.2 制作声音大小控制滑条的时候遇到了一个奇葩bug我把透明图片和其它资源打包到合图里面然后到到cocos stdudio里面 那张透明图片变成了只有一个像素的点,最 ...
- sscanf格式化输出
char DesChar[20] = {0}; char* SouChar= "1cZCD23456abEFdedfB"; sscanf(SouChar,"%[^A-Z] ...
- 认识C++中的临时对象temporary object 分类: C/C++ 2015-05-11 23:20 137人阅读 评论(0) 收藏
C++中临时对象又称无名对象.临时对象主要出现在如下场景. 1.建立一个没有命名的非堆(non-heap)对象,也就是无名对象时,会产生临时对象. Integer inte= Integer(5); ...
- Docker之Web-UI
DockerUI 不支持多主机Command: docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock dock ...
- 【C】 05 - 声明和定义
仅从形式上看,C程序就是由各种声明和定义组成的.它们是程序的骨架和外表,不仅定义了数据(变量),还定义了行为(函数).规范中的纯语言部分,声明和定义亦花去了最多的篇幅.完全说清定义的语法比较困难,这里 ...
- eclipse导入github项目
以jeesite为例, github上面的项目大都是基于git方式进行版本控制以及使用maven构建的项目. 1 使用时,需先用eclipse的以git方式从github上下载代码. 下载后得到mav ...
- 报错:HTTP Status 404 - There is no Action mapped for namespace [/] and action name [product-save] associated with context path [/20161101-struts2-2].
运行:index.jsp---->input.jsp----->details.jsp,但是在input.jsp到details.jsp的时候报错误. 异常如下: 严重: Could no ...