Changing success and error colors

We can distinguish a valid and invalid field by colors. The label, message and feedback icon associated with a valid field usually have a color which looks like green. When the field is not valid, these elements have a red-like color.
This example shows two approaches for changing these colors.

Overriding the colors

If your form uses the Bootstrap framework, FormValidation adds .has-success or .has-danger class to the field container based on the field validity. The field element will be added .is-valid or .is-invalid class.
The label, field, message and feedback icon elements will receive the associated validation styles:
/* The color of error message */
.fv-help-block {
color: #dc3545;
/* The color of valid icon */
.has-danger .fv-plugins-icon {
color: #dc3545;
/* The color of invalid icon */
.has-success .fv-plugins-icon {
color: #28a745;
So, it's quite easy for you to override these colors for all forms or particular form as below:
.my-form.fv-plugins-bootstrap .fv-help-block {
color: #f39c12;
.my-form.fv-plugins-bootstrap .has-danger .fv-plugins-icon {
color: #f39c12;
.my-form.fv-plugins-bootstrap .has-success .fv-plugins-icon {
color: #18bc9c;
Overriding the colors

Overriding row classes

As mentioned in the previous section, based on the field validity, the plugin will adds different classes for the field container. The valid and invalid classes can be defined via the rowValidClass and rowInvalidClass options which take the following default values:
Bootstrap pluginhas-successhas-danger
Bootstrap3 pluginhas-successhas-error
Bulma pluginfv-has-successfv-has-error
Foundation pluginfv-row__successfv-row__error
Materialize pluginfv-valid-rowfv-invalid-row
Milligram pluginfv-valid-rowfv-invalid-row
Mini pluginfv-valid-rowfv-invalid-row
Mui pluginfv-valid-rowfv-invalid-row
Pure pluginfv-has-successfv-has-error
Semantic pluginfv-has-successerror
Shoelace plugininput-validinput-invalid
Spectre pluginhas-successhas-error
Tachyons plugingreenred
Turret pluginfv-valid-rowfv-invalid-row
Uikit pluginuk-form-successuk-form-danger
By using your own classes for these options, you can easily customize the look and feel of valid and invalid fields:
.my-field-error .fv-plugins-message-container,
.my-field-error .fv-plugins-icon {
color: #ff0039;
.my-field-success .fv-plugins-message-container,
.my-field-success .fv-plugins-icon {
color: #2780e3;
The last step is to use the new options:
fields: {
plugins: {
tachyons: new FormValidation.plugins.Tachyons({
rowInvalidClass: 'my-field-error',
rowValidClass: 'my-field-success',
Overriding row classes

See also