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

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

• javascript
• html
• twitter-bootstrap
• forms

Share Improve this question Follow edited Dec 28, 2017 at 17:37 Bhuwan 16.9k55 gold badges3737 silver badges6060 bronze badges asked Dec 28, 2017 at 17:32 user8110974user8110974 3

• Try this formvalidation.io/examples/changing-success-error-colors – f78xd23 Commented Dec 28, 2017 at 17:41
• As a heads up - Validator hasn't updated its support for BS4 yet and some of the naming conventions have changed. If you end up adopting BS4 in your project there are CSS workarounds in GitHub to address error-coloring. – Robert Commented Dec 28, 2017 at 20:04
• @f78xd23 this link no longer exists. FYI – Pamela Cook - LightBe Corp Commented Jul 14, 2020 at 14:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./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>