CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapforms
user8110974
user8110974

Reputation:

Change bootstrap validation message color to red

I have a form that posts an error message if an invalid email is entered. I'd like the error message text to be changed to red. How can I do this?

$('#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>

Upvotes: 1

Views: 7609

Answers (2)

Darren
Darren

Reputation: 2290

If Bootstrap is added correctly you should already get error text as red. If not, this will fix that.

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>

Upvotes: 2

Bhuwan
Bhuwan

Reputation: 16855

Just add below css in your code

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

Upvotes: 4

Related Questions