Form表单验证神器： BootstrapValidator常见的坑，input框的value值改变二次验证不了？

BootstrapValidator表单验证是通常是用来设置form表单提交时，限制某些字段不能为空，为空时type="submit"的按钮一直提交不了，如下图

+++++++++++华丽的分割线+++++++++++++++

原理是引用BootstrapValidator插件后，根据要提交的form的name值对应的value数据判断，BootstrapValidator验证如下

 $(document).ready(function () {
        $('form').bootstrapValidator({
            excluded: [":disabled"],
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                actName: {
                    validators: {
                        notEmpty: {
                            message: '活动名称不能为空'
                        },
                    }
                },
                actTopic: {
                    validators: {
                        notEmpty: {
                            message: '活动主题不能为空'
                        },
                    }
                },
                location: {
                    validators: {
                        notEmpty: {
                            message: '活动地点不能为空'
                        },
                    }
                },
                actType: {
                    validators: {
                        notEmpty: {
                            message: '活动类型不能为空'
                        },
                    }
                },
                level: {
                    validators: {
                        notEmpty: {
                            message: '活动等级不能为空'
                        },
                    }
                },
                actStartTime: {
                    validators: {
                        notEmpty: {
                            message: '开始时间不能为空'
                        },
                    }
                },
                recorg: {
                    validators: {
                        notEmpty: {
                            message: '请设置活动参与人'
                        },
                    }
                },
                checkBv: {
                    validators: {
                        notEmpty: {
                            message: '活动类型不能不勾选'
                        },
                    }
                },
            }
        });
    });

其中的 fields的下一层，如actName、actTopic、location、actType等这些就是对应form表彰的name字段了， notEmpty里的message是验证form表单name字段的value为空时的提示，如下活动时间字段name=“actStartTime”的value值为空时提示了“活动时间不能为空”

 

+++++++++++华丽的分割线+++++++++++++++

使用BootstrapValidator插件会遇到某些字段value值已存在了，还是验证不了，比如“活动主题”和“活动地点”的input框在键盘输入文本后自己验证非空了，右侧有打勾的样式，但是“活动类型”和“活动时间”都已选到值了，还是验证字段的value值为空，如下

+++++++++++华丽的分割线+++++++++++++++

解决方法：

1、处理“活动类型”的type="checkbox"多选框数值二次验证

       思路：由于BootstrapValidator是按一个div块class="form-group"为一个单位验证的，如

<div class="form-group">
                <label>Username</label>
                <input type="text" class="form-control" name="username" />
 </div>

//判断checkbox是否为空值取参 ,有勾选时$(".类名:checked").length显示非null

        $(document).on('click', '.checkB', function () {

           console.log($(".checkB:checked").length)  //勾选1个显示为1，类推

        });

那么可以插多一个<input type="hidden" id="checkBv" name="checkBv" value="">在“活动类型”同一个<div class="form-group">里存放多选框是否勾选的长度，修改jq,如下

        $(document).on('click', '.checkB', function () {

           console.log($(".checkB:checked").length)

            $("#checkBv").val($(".checkB:checked").length);

        });

 

++++++++最终解决方式：++start++++

最后还有在BootstrapValidator配置里加个trigger:"change"   ，同时也要触发js或jq的change函数,这里是用jq的change(),如下

        //判断checkbox是否为空值取参

        $(document).on('click', '.checkB', function () {

            $("#checkBv").val($(".checkB:checked").length);  //赋值给新加的input id="checkBv"

            $("#checkBv").change()  //BootstrapValidator 二次验证

        });

++++++++最终解决方式：++end++++

+++++++++++华丽的分割线+++++++++++++++

最终解决了，(活动时间字段也同理)。

 

+++++++++++华丽的分割线+++++++++++++++

总结：

1、bootstrapvalidator验证的input为输入框时，键盘输入时值时，input的value可即时验证非空；如上的“活动主题”、“活动地址”；

2、bootstrapvalidator验证的input的value为js调动赋值时，如“活动类型”和“活动时间”，要在bootstrapvalidator的配置对应的相应字段时加trigger:"change" ，同时在对应的input框也要同步触发  $("#checkBv").change()函数，实现二次验证。