ブートストラップ検証メッセージの色を赤に変更してください

Question

無効な電子メールが入力された場合、エラーメッセージが表示されるフォームがあります。エラーメッセージのテキストを赤色に変更したいのですが。これどうやってするの？

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

Answer 2

ブートストラップが正しく追加されている場合は、すでに赤などのエラーテキストを取得する必要があります。そうでなければ、これで修正されます。

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>