使用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