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

Plugin rowValidClass rowInvalidClass
Bootstrap has-success has-danger
Bootstrap3 has-success has-error
Bulma fv-has-success fv-has-error
Foundation fv-row__success fv-row__error
Materialize fv-valid-row fv-invalid-row
Milligram fv-valid-row fv-invalid-row
Mini fv-valid-row fv-invalid-row
Mui fv-valid-row fv-invalid-row
Pure fv-has-success fv-has-error
Semantic fv-has-success error
Shoelace input-valid input-invalid
Spectre has-success has-error
Tachyons green red
Turret fv-valid-row fv-invalid-row
Uikit uk-form-success uk-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:


FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            tachyons: new FormValidation.plugins.Tachyons({
                rowInvalidClass: 'my-field-error',
                rowValidClass: 'my-field-success',
            }),
        },
    }
);