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

本文介绍如何解决使用bootstrapValidator插件时遇到的二次点击提交按钮才能通过验证的问题,尤其是在编码唯一性校验场景中。文章提供了解决方案并通过调整enableFieldValidators属性避免了这一问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天使用bootstrapValidator插件异步校验编码唯一性,发现该插件在使用remote属性出现两次点击提交按钮才能通过验证,不知道各位在使用的时候有没有注意到这个问题,一般在新增操作和编辑操作同属一个页面会出现频繁。

我也花费了一段时间琢磨,已下是我的处理方式:

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()函数异步提交。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值