bootstrapValidator校验后，ajax重复提交问题解决

学习者+1

于 2023-01-09 19:36:30 发布

阅读量411

点赞数 1

分类专栏： java 文章标签：前端 java ajax

原文链接：https://blog.csdn.net/LUOCHENLONG/article/details/76684939?spm=1001.2101.3001.6650.9&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-9-76684939-blog-94595487.pc_relevant_3mothn_strategy_recovery&depth_1-utm_sourc

版权

java 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章讲述了在网页表单中遇到的Ajax提交被多次触发以及与BootstrapValidator验证插件冲突的问题。通过将提交按钮类型改为button，然后在点击事件中添加验证和Ajax提交的逻辑，成功解决了这两个问题。修改后的代码确保了只有当表单验证通过时才会执行Ajax提交操作。

摘要由CSDN通过智能技术生成

参考文章

ajax的重复提交问题，和bootstrapValidator校验冲突问题解决办法

问题代码

  <div class="modal-footer">
      <button type="submit" class="btn btn-green btn-sm">新增</button>
  </div>



<script type="text/javascript">
var fields = {
        password: {validators: {notEmpty: {message: '登录密码不能为空'}}},
        //其余校验...
}
$('#serviceForm').bootstrapValidator({
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: fields
}).on("success.form.bv",function(e){
    e.preventDefault();
	 //ajax提交的代码...
});

</script>

改后代码

<div class="modal-footer">
     <button type="button" class="btn btn-green btn-sm" id="reportButton">新增</button>
 </div>


<script type="text/javascript">
    var form = $('#serviceForm');
    var fields = {
        password: {validators: {notEmpty: {message: '登录密码不能为空'}}},
        //其余校验...
    }
    
    $(document).ready(function () {
        form.bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: fields
        })
    });

    $("#reportButton").click(function (e) {
        var bmz= form.data('bootstrapValidator');
        bmz.validate();
        if (bmz.isValid()) {
            //ajax提交的代码...
        }
    })


</script>