博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
解决bootstrapvalidator配合select2插件不能正常校验的问题
阅读量:7016 次
发布时间:2019-06-28

本文共 1357 字,大约阅读时间需要 4 分钟。

我在使用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

你可能感兴趣的文章
CPU profiling
查看>>
Exchanging Partitions and Subpartitions with Tables--官方文档
查看>>
[Typescript] Typescript Enums vs Booleans when Handling State
查看>>
Java中HashMap源码分析
查看>>
(转)c#.net常用字符串函数
查看>>
Xamarin提示Build-tools版本过老
查看>>
[linux]scp指令
查看>>
自从升级到macOS后,整个人都不好了
查看>>
border-style 属性
查看>>
拒绝旧国标劣质排插,新国标插线板首选品胜
查看>>
新疆国省干线总里程突破2.9万公里
查看>>
国产智轨电车开进“冰城”接受严寒测试 表现良好
查看>>
面试官,你再问我 Bit Operation 试试?
查看>>
PSV 3.60 固化升级到 3.68 破解完全攻略
查看>>
【实操干货】KVM命令管理虚拟机与性能优化
查看>>
Android NDK JNI 开发之旅01 环境搭建入门篇
查看>>
Flutter花式玩转TextField,写一个验证码输入框超简单!
查看>>
RxJava应用:实现七牛云多图上传
查看>>
Android爬坑之旅之不易发现的BUG
查看>>
koa2开发微信公众号: 不定期推送最新币圈消息
查看>>