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的更多相关文章

  1. jquery实现ajax提交form表单的方法总结

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...

  2. jQuery Validate Ajax 验证

    jQuery Validate Ajax 验证 <script type="text/javascript"> $(function() { $('#formCityL ...

  3. 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  4. jquery.validate不用submit而用js提交的例子

    $("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...

  5. jquery.validate ajax提交

    页面引入jquery.validate.min.js <style> //引入错误格式     label.error {        display: block;        ma ...

  6. MVC4中 jquery validate 不用submit方式验证表单或单个元素

    正确引入MVC4 jquery验证的相关文件 <script src="/Scripts/jquery-1.4.4.js"></script> <sc ...

  7. MVC中 jquery validate 不用submit方式验证表单或单个元素

    <script src="/Scripts/jquery-1.4.4.js"></script> <script src="/Scripts ...

  8. jquery validate不用submit提交,用js提交的

    jquery validate控件 默认是使用submit提交的, 要想改成使用button的click事件处理函数中手工提交, 可以按照如下方式操作: 1 绑定form的validate, 2 然后 ...

  9. jquery的ajax提交form表单方式总结

    方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderServic ...

随机推荐

  1. Kafka实战系列--Kafka的安装/配置

    *) 安装和测试 cd /path/to/server#) 下载kafka二进制包wget http://apache.fayea.com/apache-mirror/kafka/0.8.1.1/ka ...

  2. oracle日期操作

    日期操作:ADD_MONTHS(date,i) 作用 返回在自定日期上添加的月份 i是整数 如果i是小数,则截取整数部分 i是负数 原有日期减去相应部分 例子: SQL> select add_ ...

  3. JavaScript 图片的上传前预览(兼容所有浏览器)

    功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点   ● 对于 Chrome.Fire ...

  4. Android Studio debug使用release的签名

    当我们在做微信微博sdk分享的时候调试非常麻烦,因为要使用对应的签名版本才能调用sdk成功. 当我们使用AndroidStudio的Gradle之后会很简单的解决这个问题. 1.我们把签名文件放到工程 ...

  5. Android学习四:数据库操作

    1前言 android中使用SQLite作为数据库,在进行相关的开发的时候不需要导入包.SQLite起符合SQL标准,也有自己的一些特性,是一个轻量级的数据库. 2代码 简单的数据库类封装 packa ...

  6. shell问题(转)

    一个同学问我一个问题,说有以下文件内容,要求输出为特定的格式.这里就献丑给出一个处理的方法吧,由于时间关系可能我的答案并不是最好的,但是我尽量将我的答案讲解明白,让你理解处理的方法.如果您有简单明了的 ...

  7. Maven进价:Maven构建错误汇总

    问题:The method of type must override asuperclass? annotation:@Override的原因 办法:项目右键->build path-> ...

  8. bzoj4130: [PA2011]Kangaroos

    Description 定义两个区间互相匹配表示这两个区间有交集. 给出长度为N的区间序列A,M次询问,每次询问序列A中最长的连续子序列,使得子序列中的每个区间都与[L,R]互相匹配 N<=50 ...

  9. overload, override和overwrite之间的区别

    Overload.Overwrite和Override的概念比较容易混淆,而且Overwrite和Override的中文翻译五花八门,让人很Confuse,顾保持英文原意: Overload  重载 ...

  10. Shell脚本中执行sql语句操作mysql

    对于自动化运维,诸如备份恢复之类的,DBA经常需要将SQL语句封装到shell脚本.本文描述了在Linux环境下mysql数据库中,shell脚本下调用sql语句的几种方法,供大家参考.对于脚本输出的 ...