我在使用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修改一下位置就可以了,很简单,所以这里就不写了。