Question

我添加了三条验证消息。当我点击提交按钮时，所有三条消息都显示在div中。

是否有任何方法可以一次显示一条消息（优先级错误或首先显示一条消息。）

代码：

<div class="col-md-6">
    <input class="form-control" type="password" id="<isprint value="#NewPasswordForm:Password:QualifiedName#">" name="<isprint value="#NewPasswordForm:Password:QualifiedName#">" placeholder="Password" data-bv-notempty="true"
                required data-bv-notempty-message="<istext key="account.user.new.password.error.required"/>"
                data-bv-identical="true"
                data-bv-identical-field="<isprint value="#NewPasswordForm:ConfirmPassword:QualifiedName#">"
                data-bv-identical-message="<istext key="account.user.new.password.error.confirm_Password"/>"
                data-bv-regexp="true"
                data-bv-regexp-regexp="^(?=[^\s]*[a-zA-Z])(?=[^\s]*[\d])[^\s].{7,256}$"
                data-bv-regexp-message="<istext key="account.create_user.password.error.regexp"/>"
                />

压缩空格后的

和HTML代码。

<div class="col-md-6">
<input id="NewPassword_Password" class="form-control" type="password" data-bv-regexp-message="The password must be at least 7 characters in length." data-bv-regexp-regexp="^(?=[^\s]*[a-zA-Z])(?=[^\s]*[\d])[^\s].{7,256}$" data-bv-regexp="true" data-bv-identical-message="The password and its confirm are not the same." data-bv-identical-field="NewPassword_ConfirmPassword" data-bv-identical="true" data-bv-notempty-message="The password is required and cannot be empty." required="" data-bv-notempty="true" placeholder="Password" name="NewPassword_Password" data-bv-field="NewPassword_Password">
<i class="form-control-feedback glyphicon-remove glyphicon" style="" data-bv-icon-for="NewPassword_Password"></i>
<small class="help-block" style="" data-bv-validator="identical" data-bv-for="NewPassword_Password" data-bv-result="INVALID">The password and its confirm are not the same.</small>
<small class="help-block" style="" data-bv-validator="notEmpty" data-bv-for="NewPassword_Password" data-bv-result="INVALID">The password is required and cannot be empty.</small>
<small class="help-block" style="" data-bv-validator="regexp" data-bv-for="NewPassword_Password" data-bv-result="INVALID">The password must be at least 7 characters in length.</small>
</div>

请提供一些意见。

Answer 1

你可以用css隐藏它们：

small.help-block {
  display: none;
}

small.help-block:first-of-type {
  display: block
}

Answer 2

请看一下插件作者（Phuoc Nguyen）如何处理 - http://bootstrapvalidator.com/examples/changing-default-behaviour/#showing-one-message-each-time

基本上，诀窍是监听验证错误事件并隐藏除最后一次验证器检查之外的所有错误消息：

    .on('error.validator.bv', function(e, data) {
        // $(e.target)    --> The field element
        // data.bv        --> The BootstrapValidator instance
        // data.field     --> The field name
        // data.element   --> The field element
        // data.validator --> The current validator name

        data.element
            .data('bv.messages')
            // Hide all the messages
            .find('.help-block[data-bv-for="' + data.field + '"]').hide()
            // Show only message associated with current validator
            .filter('[data-bv-validator="' + data.validator + '"]').show();
    });

所有代码（我假设）都是插件作者本人 - Phuoc Nguyen https://github.com/nghuuphuoc

如何在bootstrapvalidator中一次显示一条消息

2 个答案: