解决bootstrapvalidator配合select2插件不能正常校验的问题

我在使用bootstrapvalidator对select2插件进行校验时,出现了不能校验的问题,于是求助度娘,发现大多的解决方法是这样的:

  1.添加一个隐藏域,将bootstrapvalidator设置成对该隐藏域校验。

  2.下拉框的值改变时给隐藏域赋值。

  3.对bootstrapvalidator设置隐藏域可校验的属性。excluded : [':disabled'],//[':disabled', ':hidden', ':not(:visible)'] //设置隐藏组件可验证。

我亲自试验了一下,是可行的。但是这种方式让我感到很别扭,于是寻找了一下不能校验的原因,是bootstrapvalidator不会自动去校验第三方插件。

那既然这样我手动去让它校验不就可以了吗?果然如此:

这是我的手动校验方法:$(form).data('bootstrapValidator').validate();  通过按钮触发。

在我改变select2的值的时候,不会发生校验,但当我点击按钮,触发上述方法时会触发校验。

  这是初始状态:

    

  这是选中某个值的状态:并没有校验

    

  这是我点击了提交按钮的状态,也就是说调用了手动校验的方法:

    

 果然是成功校验了!

那么问题就简单了,我在select2的change事件中调用针对该下拉列表的校验即可解决问题。

    针对单个输入域校验的方法是$(form).data('bootstrapValidator').validateField(‘status’);

我的select2是div方式的:<div id="status" name="status"></div>,所以change事件这样写

    $('#status').on('change',function(e){

      $(form).data('bootstrapValidator').validateField(‘status’);

    });

来看看效果:

    

  这是初始状态:

    

  这是选中某个值的状态:

    

可以看到自动校验成功了!

但是有个bug,当我点那个小叉号清除后,并没有进行非空校验,如图

  

但此时确实也触发了change事件调用了手动校验的方法。。。于是一阵搜索,发现需要清除一下校验状态。。。原因尚不清楚。。。

好吧,清除校验状态的方法是updateStatus('status', 'NOT_VALIDATED')

再来更新一下change方法:

  

    $('#status').on('change',function(e){

      $(form).data('bootstrapValidator').updateStatus('status', 'NOT_VALIDATED').validateField(‘status’);

    });

这样就好了!!请看

这个“对号”和“叉号”的位置有点歪,这都是小问题,css修改一下位置就可以了,很简单,所以这里就不写了。

 

 

猜你喜欢

转载自www.cnblogs.com/hmxs/p/9144619.html