使用BootstrapValidator验证表单,当通过js或者JQuery给输入框填入数据时候没有触发验证的问题

问题描述

使用BootstrapValidator验证表单数据的时候,某些组件是通过js或者jQuery方式填入数据的,但是填入数据后并没有改变验证状态,代码如下所示:

<form action="add" id="dataForm" method="post" class="form-info"  >
    <input name="insideForwordName" id="insideForwordName" value="${pd.insideForwordName }" type="text" class="form-control input-sm" size="50">
</form>

<script type="text/javascript">
    function fillData(){
      $("#insideForwordName").val("测试8");
    }
</script>

<script type="text/javascript">
        //输入表单验证
        $(function () {
            $('form').bootstrapValidator({
                message: 'This value is not valid',
                excluded : [':disabled', ':not(:visible)'],//忽略不验证的项[':disabled', ':hidden', ':not(:visible)']
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    insideForwordName: {
                        message: '第三方验证失败',
                        validators: {
                            notEmpty: {
                                message: '请选择第三方'
                            }
                        }
                    }
                }
            });
        });
</script>

当通过程序给input输入框赋值时候,结果如下,验证状态没有发生改变


image.png

解决办法

通过查找资料最后找到了解决办法,直接上修改后的代码,仔细看可以发现下面的代码就是在验证属性里面加了【trigger:"change", //监听change动作】这一行,以及在填入数据后加入这一行【$("#insideForwordName").change();//触发验证】

<form action="add" id="dataForm" method="post" class="form-info"  >
    <input name="insideForwordName" id="insideForwordName" value="${pd.insideForwordName }" type="text" class="form-control input-sm" size="50">
</form>

<script type="text/javascript">
    function() fillData{
      $("#insideForwordName").val("测试8");
      $("#insideForwordName").change();//触发验证
    }
</script>

<script type="text/javascript">
        //输入表单验证
        $(function () {
            $('form').bootstrapValidator({
                message: 'This value is not valid',
                excluded : [':disabled', ':not(:visible)'],//忽略不验证的项[':disabled', ':hidden', ':not(:visible)']
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    insideForwordName: {
                        message: '第三方验证失败',
                        trigger:"change", //监听change动作
                        validators: {
                            notEmpty: {
                                message: '请选择第三方'
                        }
                        }
                    }
                }
            });
        });
</script>

最后执行结果如图


image.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容