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 ...
随机推荐
- 细说Javascript之null、undefined和NaN
首先简单介绍一下Javascript中的数据类型,Javascript中的数据类型有undefined,boolen,number,string和object等5种,前4种是原始类型,第5种是引用类型 ...
- 关于Python脚本开头两行的:#!/usr/bin/python和# -*- coding: utf-8 -*-的作用 – 指定文件编码类型
#!/usr/bin/python指定用什么解释器运行脚本以及解释器所在的位置 # -*- coding: utf-8 -*-用来指定文件编码为utf-8的PEP 0263 -- Defining P ...
- Java笔记1-Java相关概念和如何实现跨平台
一.Java相关概念 1.Java语言的核心特点跨平台面向对象 2.Java的历史版本JDK1.0,JDK1.1,JDK1.2....JDK5.0,JDK6.0,JDK7.0,JDK8.0 注意:JD ...
- MMDrawerController 的使用
1.AppDelegate .h 文件:#import "MMDrawerController .h" @property (strong, nonatomic) MMDrawer ...
- Semantic UI 中文参考手册
一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...
- MSP430精准配置高速串口波特率的方法
引言 在实际项目大批量生产调试设备时,笔者发现同样版本的程序在不同设备上运行时效果不一致,一部分设备串口通信正常,另外一部分串口通信不正常.通过示波器对多个设备的串口波特率及系统时钟频率测试, ...
- 论文笔记之:Co-saliency Detection via A Self-paced Multiple-instance Learning Framework
Co-saliency Detection via A Self-paced Multiple-instance Learning Framework T-PAMI 2016 摘要:Co-sal ...
- (转)分布式深度学习系统构建 简介 Distributed Deep Learning
HOME ABOUT CONTACT SUBSCRIBE VIA RSS DEEP LEARNING FOR ENTERPRISE Distributed Deep Learning, Part ...
- 合并excel-MergeExcel
MergeExcel 将需要合并的excel放入该目录下,包含xls和xlsx 点击运行按钮: 输入包含多少列: 等待运行,完毕! 基于python编写,源码和exe于 TTyb
- npm以及gulp相关操作
在工作流相关的第一篇博客中,我们安装了nodejs的环境,那么nodejs自带的npm是一个功能十分强大的管理器,它已经不仅仅是局限于nodejs的版本管理器了,那么当现在我们可以通过npm来下载我们 ...