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 ...
随机推荐
- Python12期培训班-day1-登陆验证代码分享
#!/usr/bin/env python import sys import getpass afile = 'afile' bfile = 'bfile' circulation_num=0 #循 ...
- 用python+selenium将腾讯首页今日话题的内容自动发表到自己cnblog里
目的:使用pyhton下的unittest单元测试框架并结合selenium的webdriver来实现将腾讯首页的今日话题下的内容自动发表达到自己的cnblog里. 思路:创建QQDailyTopic ...
- springmvc工作原理以及源码分析(基于spring3.1.0)
springmvc是一个基于spring的web框架.本篇文章对它的工作原理以及源码进行深入分析. 一.springmvc请求处理流程 二.springmvc的工作机制 三.springmvc核心源码 ...
- (实用篇)PHP中单引号与双引号的区别分析
在PHP中,我们可以使用单引号或者双引号来表示字符串.不过我们作为开发者,应该了解其中的区别.单引号与双引号对于定义字符一个是可以解析变量一个是会把变量直接输出来,同时单引号与双引号在字符处理上单引号 ...
- 问:Linux下Chrome标题栏中文乱码
From:http://blog.csdn.net/loveaborn/article/details/29579787 在使用Linux的时候你会遇到一些奇奇怪怪的问题,不过,你会在解决这些问题的过 ...
- selinium的ruby版在windows8下安装
1.安装ruby,当然windows下是最简单的装一个rubyinstaller,官网有.一步到位 2.因为selinium官网被墙,所以改成淘宝的一个资源库 gem sources --remove ...
- UIControlEventTouch
在控件事件中,简单解释下下面几个事件. 说明:由于是在“iOS 模拟器”中测试的,所以不能用手指,只能用鼠标. 1)UIControlEventTouchDown 指鼠标左键按下(注:只是“按下”)的 ...
- Ogre1.6.5 编译链接错误之FreeImage
这两天想重新学习下ogre,但是在vs2010上编译1.6.5的版本上遇到链接失败的问题,耗了不少时间这里记一下. 主要是一些重定义报错. >msvcprtd.lib(MSVCP100D.dll ...
- 自定义滚动条样式(jQuery插件、Webkit、IE)
-------------jQuery滚动条插件------------- http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html http: ...
- Python 100道题深入理解
# -*- coding: utf-8 -*-# 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少?# 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所 ...