今天使用bootstrapValidator插件异步校验编码唯一性,发现该插件在使用remote属性出现两次点击提交按钮才能通过验证,不知道各位在使用的时候有没有注意到这个问题,一般在新增操作和编辑操作同属一个页面会出现频繁。
绿色标记代码部分便是处理方式,楼主只是巧妙根据enableFieldValidators属性特点来判断是否需要校验,当页面处于编辑状态,是可以不需要校验唯一性的,这样就可以避免出现表单在两次点击才能提交问题。
我也花费了一段时间琢磨,已下是我的处理方式:
ajax请求部分:
threshold : 1 ,
remote: {
url: url,
message: '类型编码已存在',
delay : 2000,
type: 'POST',
data: function(validator) {
return {
target:target,
key:"code",
value:$("#formUpdate input[name='code']").val(),
id:$("#formUpdate input[name='id']").val()
};
}
},
表单校验部分:
var id = $("#formUpdate input[name='id']").val();
if(id != null && id != ""){
$('#formUpdate').bootstrapValidator('enableFieldValidators', 'code', false);
} else {
$('#formUpdate').bootstrapValidator('enableFieldValidators', 'code', true);
}
var url = $("input[name='url']").val();
var data = $('#formUpdate').serializeArray();
var bootstrapValidator = $("#formUpdate").data('bootstrapValidator');
bootstrapValidator.validate();
var flag = bootstrapValidator.isValid();
if (flag) {TODO:业务逻辑}
绿色标记代码部分便是处理方式,楼主只是巧妙根据enableFieldValidators属性特点来判断是否需要校验,当页面处于编辑状态,是可以不需要校验唯一性的,这样就可以避免出现表单在两次点击才能提交问题。
我也分析了出现两次提交的原因,当我们没用让校验框失去焦点直接点击提交,第一次bootstrapValidator.isValid();在再返回校验结果之前remote属性进行异步校验,并没有返回校验结果,而期间,程序默认false继续执行了,第二次才点击才能拿到上次的结果。即与ajax异步请求有很大关系。阅读源码不难发现remote,正好为$.ajax()函数异步提交。