zoukankan      html  css  js  c++  java
  • 解决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修改一下位置就可以了,很简单,所以这里就不写了。

     

     

  • 相关阅读:
    September 17th 2016 Week 38th Saturday
    【2016-09-16】UbuntuServer14.04或更高版本安装问题记录
    September 16th 2016 Week 38th Friday
    September 11th 2016 Week 38th Sunday
    September 12th 2016 Week 38th Monday
    September 10th 2016 Week 37th Saturday
    September 9th 2016 Week 37th Friday
    c++暂停
    八皇后问题
    ( 转转)Android初级开发第九讲--Intent最全用法(打开文件跳转页面等)
  • 原文地址:https://www.cnblogs.com/hmxs/p/9144619.html
Copyright © 2011-2022 走看看