2017-12-28 27 views
0

잘못된 이메일을 입력하면 오류 메시지가 나타나는 양식이 있습니다. 오류 메시지 텍스트를 빨간색으로 변경하고 싶습니다. 어떻게해야합니까? 부트 스트랩 유효성 검사 메시지 색상을 빨간색으로 변경하십시오.

+0

최대 머리로이 http://formvalidation.io/examples/changing-success-error-colors/ – f78xd23

+0

시도 - 검사기가 BS4에 대한 지원을 업데이트하지 않았습니다 아직 명명 규칙이 변경되었습니다. 프로젝트에서 BS4를 채택하게되면 GitHub에서 오류 착색 문제를 해결하기위한 CSS 해결 방법이 있습니다. –

답변

1

$('#subscribe-form').bootstrapValidator({ 
 
    live: 'disabled', 
 
    fields: { 
 
    email: { 
 
     validators: { 
 
     emailAddress: { 
 
      message: 'Please enter a valid email address' 
 
     } 
 
     } 
 
    }, 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form role="form" id="subscribe-form"> 
 
    <div class="form-group"> 
 
    <input type="email" class="form-control custom-email" name="email" id="email" placeholder="Email Address"> 
 
    </div> 
 
    <button type="submit" class="btn btn-large custom-button">Sign up !</button> 
 
</form>

그냥 코드에서 CSS를 아래에 추가

.has-error .help-block { 
    color: red; 
} 

$('#subscribe-form').bootstrapValidator({ 
 
    live: 'disabled', 
 
    fields: { 
 
    email: { 
 
     validators: { 
 
     emailAddress: { 
 
      message: 'Please enter a valid email address' 
 
     } 
 
     } 
 
    }, 
 
    } 
 
});
.has-error .help-block { 
 
    color: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script> 
 
<form role="form" id="subscribe-form"> 
 
    <div class="form-group"> 
 
    <input type="email" class="form-control custom-email" name="email" id="email" placeholder="Email Address"> 
 
    </div> 
 
    <button type="submit" class="btn btn-large custom-button">Sign up !</button> 
 
</form>

+0

감사합니다! –

+0

도와 드리겠습니다 :) – Bhuwan

0

부트 스트랩이 제대로 추가 된 경우 이미 빨간색으로 오류 텍스트를 얻어야한다. 그렇지 않으면이 문제가 해결됩니다.

small.help-block { 
    color: #F44336 !important; 
} 

$('#subscribe-form').bootstrapValidator({ 
 
    live: 'disabled', 
 
    fields: { 
 
    email: { 
 
     validators: { 
 
     emailAddress: { 
 
      message: 'Please enter a valid email address' 
 
     } 
 
     } 
 
    }, 
 
    } 
 
});
small.help-block { 
 
    color: #F44336 !important; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script> 
 

 
<form role="form" id="subscribe-form"> 
 

 
    <div class="form-group"> 
 
    <input type="email" class="form-control custom-email" name="email" id="email" placeholder="Email Address"> 
 
    </div> 
 

 
    <button type="submit" class="btn btn-large custom-button"> Sign up ! </button> 
 
</form>