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:
.fv-help-block {
color: #dc3545;
}
.has-danger .fv-plugins-icon {
color: #dc3545;
}
.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:
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',
}),
},
}
);
See also