修复BootstrapValidator重复提交的bug
2015-10-15 22:32
453 查看
BootstrapValidator很漂亮,但漂亮的脸蛋下往往会隐藏杀机,这不,出现了重复提交的bug。
为BootstrapValidator设置on方法,其key为
调查结果:
当不使用BootstrapValidator时,就不会出现如图提示问题。
只有首次点击提交,会重复提交两次,而接下来重新输入用户名后,就单次提交了。
描述:
这是一个普通的form表单,action中为请求地址,form中有onsubmit方法,主要是为了验证表单,然后发送请求,最后回调tabAjaxDone方法。
如果你还想看得更加仔细,请参阅哈哈,bootstrap validate就是不错,里面有具体的介绍和代码。
之前使用jquery validate的时候也没有问题。
那么问题只能发生在bootstrap validate上了。
而bootstrap validate的默认使用上也是没有问题的,因为只有首次点击提交时才会重复提交。
那么这可能是bootstrap validate有默认的提交请求。
再查看validate对象,可以看到它默认有很多事件,其中formsuccess的嫌疑最大,也就是说有可能是其再次触发了提交请求。
在页面初次加载的时候,BootstrapValidator需要按照上述方式进行加载,方可进行前端数据校验。
你已经看到注释的代码,也许你已经猜得到,这就是解决办法。没错,为form加上该事件处理,使用
笑对现实的无奈,不能后退的时候,不再傍徨的时候,永远向前 路一直都在──陈奕迅《路一直都在》
本文出自:【沉默王二的博客】
解决办法
// validate form $("form.required-validate", $p).each(function() { var $form = $(this); $form.bootstrapValidator().on('success.form.bv', function(e) { // 阻止默认事件提交 e.preventDefault(); }); });
为BootstrapValidator设置on方法,其key为
success.form.bv,value为
e.preventDefault();。
bug调查
调查结果:
当不使用BootstrapValidator时,就不会出现如图提示问题。
只有首次点击提交,会重复提交两次,而接下来重新输入用户名后,就单次提交了。
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分析
form表单肯定没有问题,如果没有bootstrap validate,那是一点问题都没有。之前使用jquery validate的时候也没有问题。
那么问题只能发生在bootstrap validate上了。
而bootstrap validate的默认使用上也是没有问题的,因为只有首次点击提交时才会重复提交。
那么这可能是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(); // }); });
在页面初次加载的时候,BootstrapValidator需要按照上述方式进行加载,方可进行前端数据校验。
你已经看到注释的代码,也许你已经猜得到,这就是解决办法。没错,为form加上该事件处理,使用
e.preventDefault();阻止默认事件提交。
相关文章
哈哈,bootstrap validate就是不错笑对现实的无奈,不能后退的时候,不再傍徨的时候,永远向前 路一直都在──陈奕迅《路一直都在》
本文出自:【沉默王二的博客】
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- 火狐4、谷歌12不支持Jquery Validator的解决方法分享
- 解决php表单重复提交实现方法
- C#验证控件validator的简单使用
- asp.net 处理F5刷新页面重复提交页面的一个思路
- 一个非常强大完整的web表单验证程序Validator v1.05
- 基于Bootstrap的网页设计实例
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- jquery重复提交请求的原因浅析
- BootStrap实现带有增删改查功能的表格(DEMO详解)
- 通过Tabs方法基于easyUI+bootstrap制作工作站
- BootStrap栅格系统、表单样式与按钮样式源码解析
- asp.net 防止用户通过后退按钮重复提交表单
- asp.net防止刷新时重复提交(可禁用工具条刷新按钮)
- 几种防止表单重复提交的方法
- jfinal与bootstrap的登录跳转实战演习
- JSP避免Form重复提交的三种方案
- 关于页面刷新,事件重复提交的方法分享
- 用Mimer Validator检查SQL查询