当字段有效时，Bootstrapvalidation 不会隐藏错误消息

Posted 2023-05-08

【中文标题】当字段有效时，Bootstrapvalidation 不会隐藏错误消息

【英文标题】：Bootstrapvalidation will not hide error message when the field is valid

【发布时间】：2018-11-21 16:17:07

【问题描述】：

我正在使用 bootstrapvalidator 插件，我知道这是一个不再受支持的旧版本，新版本称为 FormValidation (http://formvalidation.io/) 但现在需要付款，所以我正在寻找快速解决我的问题.

错误是即使验证成功后，将鼠标悬停在绿色对勾上仍然会显示错误消息。例如，当两个密码相同时，会显示消息“新密码及其确认不同”。

jQuery 代码如下：

$('#newPasswordForm')
    .bootstrapValidator(
        container: 'tooltip',
        feedbackIcons: 
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        ,
        fields: 

            password: 
                validators: 
                    regexp: 
                        regexp: /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-.~]).8,$/,
                        message: 'Password must use a combination of at least 8 upper and lower case letters, numbers and symbols.'
                    ,
                    notEmpty: 
                        message: 'You must enter your new password'
                    ,
                    stringLength: 
                        min: 8,
                        message: 'Password must be at least 8 characters in length'
                    ,
                    identical: 
                        field: 'password_confirmation',
                        message: 'The new password and its confirm are not the same'
                    
                
            ,

            password_confirmation: 
                validMessage: '',
                validators: 
                    notEmpty: 
                        message: 'You must confirm your new password'
                    ,
                    identical: 
                        field: 'password',
                        message: 'The new password and its confirm are not the same'
                    
                
            

        
    )

表单html如下：

   <form id="newPasswordForm" class="form-horizontal" role="form" method="POST" action="">
        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-6">
                <input id="email" type="email" class="form-control" name="email" value="$email" required autofocus>
            </div>
        </div>

        <div class="form-group">
            <label for="password" class="col-sm-2 control-label">New Password</label>
            <div class="col-sm-6">
                <input type="password" class="form-control" id="password" name="password" placeholder="New Password">
            </div>
        </div>
        <div class="form-group">
            <label for="password_confirmation" class="col-sm-2 control-label">Confirm Password</label>
            <div class="col-sm-6">
                <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Confirm Password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-6">
                <button type="submit" class="btn btn-primary" id="resetBtn">Set password</button>
            </div>
        </div>
    </form>

【问题讨论】：

你能在这里张贴html表格吗？

@BhumiShah 我在上面添加了 HTML 表单

【参考方案1】：

我已创建演示，但在绿色勾号悬停时未显示错误消息：

https://codepen.io/creativedev/pen/bKWgPz

我使用的 Bootstrapvalidator 版本是：

https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js

【讨论】：

感谢您的回答。事实证明这是版本 0.5.2 的问题。如果您将引导验证程序更改为此版本，它应该有同样的问题。因为这只是一个很小的变化，虽然我可以在我的网站上更新到 0.5.3，但不会破坏任何东西。我会试试看。

我认为升级后不会破坏任何东西。

在进行了一些测试之后，使用 v0.5.3 似乎会破坏网站其他地方的验证。特别与选择输入有关。除非我可以对此进行修复，否则可能只是使用另一个 jquery 验证库