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:

Plugin	rowValidClass	rowInvalidClass
Bootstrap plugin	`has-success`	`has-danger`
Bootstrap3 plugin	`has-success`	`has-error`
Bulma plugin	`fv-has-success`	`fv-has-error`
Foundation plugin	`fv-row__success`	`fv-row__error`
Materialize plugin	`fv-valid-row`	`fv-invalid-row`
Milligram plugin	`fv-valid-row`	`fv-invalid-row`
Mini plugin	`fv-valid-row`	`fv-invalid-row`
Mui plugin	`fv-valid-row`	`fv-invalid-row`
Pure plugin	`fv-has-success`	`fv-has-error`
Semantic plugin	`fv-has-success`	`error`
Shoelace plugin	`input-valid`	`input-invalid`
Spectre plugin	`has-success`	`has-error`
Tachyons plugin	`green`	`red`
Turret plugin	`fv-valid-row`	`fv-invalid-row`
Uikit plugin	`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'
          ,
          
        
        
          
          }
          )
          ,
          
        
        
          
          }
          ,
          
        
        
          
          }
          
        
        
          
          )
          ;

Overriding row classes

Changing success and error colors

Overriding the colors

Overriding row classes

See also