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

Twitter bootstrap 如何在bootstrapvalidator中一次显示一条消息,twitter-bootstrap,jqbootstrapvalidation,Twitter Bootstrap,Jqbootstrapvalidation,我添加了三条验证消息。当我单击submit按钮时,所有三条消息都显示在div中 有没有办法一次显示一条消息(优先顺序或哪个先到) 代码: 和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 characte

我添加了三条验证消息。当我单击submit按钮时,所有三条消息都显示在div中

有没有办法一次显示一条消息(优先顺序或哪个先到)

代码:


和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>

密码和确认密码不一样。
密码是必需的,不能为空。
密码长度必须至少为7个字符。

请提供一些输入。

您可以使用css隐藏它们:

small.help-block {
  display: none;
}

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

请看一下插件作者(Phuoc Nguyen)是如何处理这些问题的-

基本上,技巧是侦听验证错误事件并隐藏除最后一次验证程序检查之外的所有错误消息:

    .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

    .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();
    });