关于bootstrapValidator 表单校验remote出现两次重复提交才能验证通过问题处理

使用bootstrapValidator插件校验编号,姓名唯一性,发现该插件在使用remote属性出现两次点击提交按钮才能通过验证。

原因:remote里面请求后台默认是异步请求的,而且还不能同步请求,bootstrapValidator没有等ajax拿到返回值就直接拿了一个默认值false导致的该问题;

在网上看了很多文章都没有正确的解决方法,已下是我的处理方式:

使用callback属性代替remote属性实现灵活的请求校验。

平常的写法:

name : {
                group : '.col-sm-6',
                validators : {
                    notEmpty : {
                        message : '请填写名称'
                    },
                    stringLength: {
                        max: 45,
                        message: '输入长度不得超过45位'
                    },
                   
                    remote : {
                        url: aicDb + 'categoryCodeAction!checkExists.action',
                        message:'已存在',
                        type: 'post',
                        data:function(validator) {
                            return {
                                usetype: $('#usetype').val(),
                                id:$('#elementID').val()
                            };
                        }
                    } 
                }
            },

  修改后的代码

name : {
                group : '.col-sm-6',
                validators : {
                    notEmpty : {
                        message : '请填写名称'
                    },
                    stringLength: {
                        max: 45,
                        message: '输入长度不得超过45位'
                    },
                  
                    callback: {
                        message: '已存在',
                        callback: function (value, validator) {
                            console.log(value);
                            var flag = false;
                            $.ajax({
                                url:aicDb + 'categoryCodeAction!checkExists.action', // 请求路径
                                type:'POST',
                                async:false,	// 同步请求,必须是false
                                data: {
                                    name: value,
                                    usetype: $('#usetype').val(),
                                    id:$('#elementID').val()
                                },
                                success:function(res){
                                    flag = res.valid;
                                }
                            });
                            return flag
                        }
                    },
                }
            },

  将remote改为callback中即可

注意: 此处callback 的 async必须是同步的

async:false,	// 同步请求,必须是false

 

posted @ 2020-07-14 10:17  甜甜宝宝  阅读(703)  评论(0编辑  收藏  举报