2014-07-23 4 views
1

세 가지 유효성 검사 메시지를 추가했습니다. 제출 버튼을 클릭하면 세 개의 메시지가 모두 div에 표시됩니다.bootstrapvalidator에서 한 번에 하나의 메시지를 표시하는 방법

한 번에 하나의 메시지를 표시 할 수있는 방법이 있나요

코드 (우선 그 또는 어느 먼저가.) : 공간을 누른 후

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

일부 입력하십시오.

답변

2

당신은 CSS로 숨길 수 :

small.help-block { 
    display: none; 
} 

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

가에서 봐 주시기 바랍니다 방법 플러그인 저자 (푸옥 구엔)가 있음을 처리 - 트릭은 유효성 검사 오류 이벤트를 수신하고 숨기는 것입니다 http://bootstrapvalidator.com/examples/changing-default-behaviour/#showing-one-message-each-time

Basicly 마지막 유효성 검사를 제외한 모든 오류 메시지 :

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

모든 코드 (I 가정) 플러그인 작가 자신입니다 - 푸옥 응우 https://github.com/nghuuphuoc

+0

나를 위해 작동하지 않습니다. –

관련 문제