修复bootstrap validate重复提交的bug

前言:【修复bootstrap validate重复提交的bug】,项目是基于bootstrap和jfinal开发的,这个过程的确很痛苦,但也伴随着很多收获,就如同本文一样,之前尝试用了bootstrap的validate来验证表单数据,确实很不错,然而这中间也夹带着不经意的bug,很隐蔽。

bug调查

调查结果:

1. 当不使用bootstrap validate时,就不会出现如图提示问题。

2. 只有首次点击提交,会重复提交两次,而接下来重新输入用户名后,就单次提交了。

bug发生环境

<form class="required-validate" action="${ctx}/mem/login?callbackType=forward" method="post" onsubmit="return validateCallback(this, tabAjaxDone)" type="login">
...

<button type="submit" style="width: 100%;" class="btn btn-default">提交</button>

</form>

描述:

这是一个普通的form表单,action中为请求地址,form中有onsubmit方法,主要是为了验证表单,然后发送请求,最后回调tabAjaxDone方法。

如果你还想看得更加仔细,请参阅哈哈,bootstrap validate就是不错,里面有具体的介绍和代码。

bug分析

  1. form表单肯定没有问题,如果没有bootstrap validate,那是一点问题都没有。
  2. 之前使用jquery validate的时候也没有问题。
  3. 那么问题只能发生在bootstrap validate上了。
  4. 而bootstrap validate的默认使用上也是没有问题的,因为只有首次点击提交时才会重复提交。
  5. 那么这可能是bootstrap validate有默认的提交请求。

再查看validate对象,可以看到它默认有很多事件,其中formsuccess的嫌疑最大,也就是说有可能是其再次触发了提交请求。

bug调试

    // validate form
    $("form.required-validate", $p).each(function() {
        var $form = $(this);
        $form.bootstrapValidator();
//      .on(‘success.form.bv‘, function(e) {
//          // 阻止默认事件提交
//          e.preventDefault();
//      });
    });

1. 在页面初次加载的时候,bootstrap validate需要按照上述方式进行加载,方可进行前端数据校验。

2. 你已经看到注释的代码,也许你已经猜得到,这就是解决办法。没错,为form加上该事件处理,使用e.preventDefault();阻止默认事件提交。

结语:这类bug,如果你不“昨夜西风凋碧树。独上高楼,望尽天涯路。”自然是找不到解决办法,因为这类问题发生得不符合常规。

版权声明:本站博客均为qing_gee原创文章,请勿引用或者转载。

时间: 2024-10-10 18:30:42

修复bootstrap validate重复提交的bug的相关文章

ASP.NET MVC的Ajax.ActionLink 的HttpMethod=&quot;Get&quot; 一个重复请求的BUG

这段时间使用BootStrap+Asp.net Mvc5开发项目,Ajax.ActionLink遇到一个重复提交的BUG,代码如下: 1 @model IList<WFModel.WF_Temp> 2 @{ 3 Layout = null; 4 } 5 6 <!DOCTYPE html> 7 8 <html> 9 <head> 10 <meta name="viewport" content="width=device-w

JavaWeb学习总结(十三)——使用Session防止表单重复提交

在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML>

ASP.NET Web Form和MVC中防止F5刷新引起的重复提交问题

转载  http://www.cnblogs.com/hiteddy/archive/2012/03/29/Prevent_Resubmit_When_Refresh_Reload_In_ASP_NET_Web_Form_MVC.html 什么是刷新/重新载入 IE中的刷新(Refresh),在FF和Chrome中称为重新载入(Reload),与正常进入页面的区别在于以下两点: 1. 缓存控制 如果文件(比如图片)在本地缓存中已经存在,正常进入页面会不访问服务器而直接从本地加载.而对于刷新操作,

设置按钮不可用避免重复提交

 设置按钮不可用,避免重复提交 编写人:CC阿爸 2015-1-29 今天在这里,我想与大家一起分享如何处理项目中经常出现用户重复提交的情况,为了防止这种情况,最常用的方法就是在用户点击按钮后将该按钮设为不可用,笔者在实际开发当中遇到了多种不同的情况,在此做个小结,以供参考.有兴趣的同学,可以一同探讨与学习一下,否则就略过吧. 由于刚开始进行的web开发,很多时候使用的为html控件,因此处理起来相当简单 如:先前开发的报销系统,在提交单据审批时,时常会出现重复审批下一流程的bug. Aspx前

MVC Ajax.BeginForm重复提交解决方法

mvc使用MVC Ajax.BeginForm提交的时候有重复提交结果的时候检查相关js文件引用情况, 其中mvc4注意 1 2 3 4 @Scripts.Render("~/bundles/modernizr") bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(                        "~/Scripts/jquery.unobtrusive*",

关于防止表单表达重复提交的几个解决方法

表达重复提交的问题,是B/S系统开发中经常容易被忽视,但常常又令程序员头疼的一个问题.根据墨菲定律,如果你不做防止重复提交的机制,那些用户行为往往就会给你带来麻烦,然后就等着产品经理的抱怨吧.下面,我就总结了几条常见的关于B/S系统中防止表单重复提交的几个办法: 1.页面上控制.怕用户点击提交按钮2次?用javascript控制下吧:怕用户后退导致重复提交?那就干脆打开个新页面吧.总之你要设想到用户在页面上的所有可能的操作,把这些容易导致BUG的操作消灭的萌芽中. 2.session控制.如果实

JavaWeb---总结(十三)使用Session防止表单重复提交

在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <

[Java拾遗五]使用Session防止表单重复提交

申明:此文章属于转载, 转自博客: http://www.cnblogs.com/xdp-gacl/p/3859416.html在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提交的常见应用场景 有如下的form.jsp页面 1 <%@ page language="java" import="java.util.*&qu

form表单重复提交,type=“button”和type=“submit”区别

公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type="submit" value="提交"  class="btn"  id="formSubmit" onclick="checkForm()"  /> type类型写成submit,而在checkForm