解决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修改一下位置就可以了，很简单，所以这里就不写了。

 

 

 

 

 

转载于:https://www.cnblogs.com/hmxs/p/9144619.html