when the jquery validation plugin is used for validating the form data, such as below:

html code:

  1. <form method="post" action="" id="buy-form" novalidate="novalidate">
  2. <table style="margin:35px 150px 0 150px;">
  3. <tr>
  4. <td class="info-title">预定版本<input type="hidden" name="versionName" id="versionName" value="" /></td>
  5. <td class="info-content-version">免费版本</td>
  6. </tr>
  7. <tr>
  8. <td class="info-title">联系人</td>
  9. <td class="info-content"><p><input class="required" type="text" placeholder="请输入联系人姓名(必填)" style="width:330px;" name="name" id="applicants-name" /></p></td>
  10. </tr>
  11. <tr>
  12. <td class="info-title">电话</td>
  13. <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>
  14. </tr>
  15. <tr>
  16. <td class="info-title">邮箱</td>
  17. <td class="info-content"><input type="text" placeholder="请输入联系人邮箱地址(必填)" style="width:330px;" name="email" id="email" /></td>
  18. </tr>
  19. <tr>
  20. <td class="info-title">公司名称</td>
  21. <td class="info-content"><input type="text" placeholder="请输入联系人公司名称(必填)" style="width:330px;" name="companyName" id="companyName" /></td>
  22. </tr>
  23. </table>
  24. </form>

js code:

  1. var form = $("#buy-form");
  2. form.validate({
  3. errorElement: "span",
  4. rules: {
  5. "name": {
  6. required: true
  7. },
  8. "phone": {
  9. required: true
  10. },
  11. "email": {
  12. required: true
  13. },
  14. "companyName": {
  15. required: true
  16. }
  17. },
  18. messages: {
  19. "name": {
  20. required: "请输入联系人姓名",
  21. },
  22. "phone": {
  23. required: "请输入号码",
  24. },
  25. "email": {
  26. required: "请输入邮箱地址",
  27. },
  28. "companyName": {
  29. required: "请输入公司名称",
  30. }
  31. }
  32. });

ajax submit code:

  1. $(".submit").click(function(){
  2.  
  3. var form = $("#buy-form");
  4. var $alertDialog = $("#alert-dialog");
  5.  
  6. form.submit(function (event) { event.preventDefault();});//阻止在数据校验失败的情况下提交表单;绑定事件,但不触发;
  7. form.submit();//触发绑定事件;
  8. var validator = form.validate();
  9. if (validator.numberOfInvalids() <= 0) {//判断加入所有校验都通过后再做ajax提交;
  10. $.ajax({
  11. url: "Home/SubmitPurchaseApplication",
  12. data: $("#buy-form").serialize(),
  13. type: "post",
  14. async: false,
  15. success: function (data) {
  16. freeDialog.dialog("close");
  17. $("#alert-title h3").text("购买成功!");
  18. $("#alert-message p").text("您的购买申请已经提交,我们会尽快联系您");
  19. ShowAlertDialog(); //异步提交后弹框提示;
  20.  
  21. },
  22. error: function () {
  23. freeDialog.dialog("close");
  24. $("#alert-title h3").text("购买失败!");
  25. $("#alert-message p").text("您的购买申请出现异常,请重新申请");
  26. ShowAlertDialog();
  27. }
  28. });
  29. }
  30. });

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. Android FM 模块学习之四 源码解析(1)

    Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE MicrosoftInternetExplorer4 前一章我们了解了FM手动调频,接下 ...

  2. UDP信息接收与发送

    转载:http://www.cnblogs.com/sunev/archive/2012/08/08/2627247.html 一.摘要 总结基于C#的UDP协议的同步通信. 二.实验平台 Visua ...

  3. php部分---注册审核

    用户界面: 1.登录界面,用户填写相关信息 <form action="dengluchuli.php" method="post"> <di ...

  4. 发掘odoo.cli.server.Server的秘密,OpenERP的第三根线头儿

    command.py调用了server command 在server.py中,主函数main使用了外层模块传递来的args def main(args): check_root_user() odo ...

  5. 2015.12.21~2015.12.24真题回顾!-- HTML5学堂

    2015.12.21~2015.12.24真题回顾!-- HTML5学堂 山不在高,有仙则名!水不在深,有龙则灵!千里冰封,非一日之寒!IT之路,须厚积薄发!一日一小练,功成不是梦!小小技巧,尽在HT ...

  6. 使Maven 2在package、install等阶段跳过运行Test的配置

    方法1: To skip running the tests for a particular project, set the skipTests property to true.<proj ...

  7. PHP DES 加解密

    代码很简单,如下: <?php $key = 'very important data'; function jiami($key, $str) { /* Open module, and cr ...

  8. angular.js ngbind nghtml ngTemplate

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 转,CV和resume的区别

    一直以来,BBS上的信息资料都传达给我一个网上“主流”的关于CV和resume的看法: CV约等于Resume,前者略倾向于学术,后者略倾向于工作经验,字数控制在1-2页内 说实话,一直以来我也就这么 ...

  10. 解决Tomcat catalina.out 不断成长导致档案过大的问题

    Tomcat的网站上的说法http://wiki.apache.org/tomcat/FAQ/Logging#Q6: System.out 和 System.err 都被打印到 catalina.ou ...