修复BootstrapValidator重复提交的bug

拼搏现实的明天。 2021-09-10 15:24 520阅读 0赞

BootstrapValidator很漂亮，但漂亮的脸蛋下往往会隐藏杀机，这不，出现了重复提交的bug。

## 解决办法 ##

// 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调查 ##

![这里写图片描述][20151015140551581]

调查结果：

1.  当不使用BootstrapValidator时，就不会出现如图提示问题。
2.  只有首次点击提交，会重复提交两次，而接下来重新输入用户名后，就单次提交了。

## bug发生环境 ##

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

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

## bug分析 ##

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

![这里写图片描述][20151015142022385]

再查看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.  在页面初次加载的时候，BootstrapValidator需要按照上述方式进行加载，方可进行前端数据校验。
2.  你已经看到注释的代码，也许你已经猜得到，这就是解决办法。没错，为form加上该事件处理，使用`e.preventDefault();`阻止默认事件提交。

--------------------

## 相关文章 ##

*  [哈哈，bootstrap validate就是不错][bootstrap validate]

> 笑对现实的无奈，不能后退的时候，不再傍徨的时候，永远向前　路一直都在──陈奕迅《路一直都在》  
> 本文出自:【[沉默王二的博客][Link 1]】

[20151015140551581]: /images/20210506/c0b815a19eb24b9a869e9756efcf77a2.png
[bootstrap validate]: http://blog.csdn.net/qing_gee/article/details/49101931
[20151015142022385]: /images/20210506/1c11d4ed51874241af0a290f279af962.png
[Link 1]: http://blog.csdn.net/qing_gee