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

     

     

  • 相关阅读:
    基础DP(初级版)
    UVA-816.Abbott's Tevenge (BFS + 打印路径)
    1044: 数圈
    1049: 打牌
    1047: 小A的计算器
    1046: 最小的K个数
    1045: 愚人节的礼物
    1044: 数圈
    1043: 绩点计算
    1042: 小丑排序
  • 原文地址:https://www.cnblogs.com/hmxs/p/9144619.html
Copyright © 2020-2023  润新知