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. [读书笔记]OSGI-灵活的类加载器架构

    以下内容来自周志明的<深入理解Java虚拟机>. 学习JEE规范,去看JBoss源码:学习类加载器,就去看OSGI源码. OSGI,即Open Service Gateway Initia ...

  2. linux系统的初化始配置 IP 主机名 防火墙 selinux

    本次内容包括Linux:ip.主机名.关闭firewalld与selinux 开机临时生效和永久生效 ------------------------------------------------- ...

  3. ef执行记录原生态代码方法。

    select e; var f = (System.Data.Objects.ObjectQuery<SimpleEntry>)final; var s = f.ToTraceString ...

  4. Openstack Neutron L2 Population

    Why do we need it, whatever it is? VM unicast, multicast and broadcast traffic flow is detailed in m ...

  5. 5分钟实现VS2010整合NUnit进行单元测试

    本文转载自:http://www.cnblogs.com/jeffwongishandsome/archive/2012/03/18/2404845.html 1.下载安装NUnit(最新win版本为 ...

  6. Tcpdump命令详解

    简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的 ...

  7. <s:select>下拉框是空白的解决办法

    首先,定义了一个Department的JavaBean对象如下 DAO.java 在一个Action类Employee.java中将depts放入requestMap中 最后,在index.jsp里定 ...

  8. python xlwt,xlutils 在excel里面如何插入一行数据

    就是把插入行之后值重新输出来. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 import xl ...

  9. Delphi制作DLL

    一.开使你的第一个DLL专案 1.File->Close all->File->New﹝DLL﹞ 代码: //自动产生Code如下 library Project2; //这有段废话 ...

  10. 【uTenux实验】邮箱

    邮箱是一个通过在系统(共享)内存空间传递消息来实现同步和通信的对象.uTenux中每个邮箱都包含一个用来发送消息的消息队列和一个用于等待接收消息的任务队列,其使用邮箱功能的消息内容放置在发送方和接收方 ...