This site contains the document for old version. Please upgrade to the latest version v1.0.0

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-error class defined by Bootstrap's validation state classes to the field container based on the field validity.

The label, field, message and feedback icon elements which have .control-label, .form-control, .help-block, and .form-control-feedback class will receive the associated validation styles:

/* Color of invalid field */
.has-error .control-label,
.has-error .help-block,
.has-error .form-control-feedback {
    color: #a94442;
}

/* Color of valid field */
.has-success .control-label,
.has-success .help-block,
.has-success .form-control-feedback {
    color: #3c763d;
}

So, it's quite easy for you to override these colors for all forms or particular form as below:

#loginForm .has-error .control-label,
#loginForm .has-error .help-block,
#loginForm .has-error .form-control-feedback {
    color: #f39c12;
}

#loginForm .has-success .control-label,
#loginForm .has-success .help-block,
#loginForm .has-success .form-control-feedback {
    color: #18bc9c;
}

<style type="text/css">
#loginForm .has-error .control-label,
#loginForm .has-error .help-block,
#loginForm .has-error .form-control-feedback {
    color: #f39c12;
}

#loginForm .has-success .control-label,
#loginForm .has-success .help-block,
#loginForm .has-success .form-control-feedback {
    color: #18bc9c;
}
</style>

<form id="loginForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Username</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Password</label>
        <div class="col-xs-5">
            <input type="password" class="form-control" name="password" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#loginForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    }
                }
            }
        }
    });
});
</script>

Using the row option

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 row option which takes the following default values:

Framework	row option
Bootstrap	`row: { valid: 'has-success', invalid: 'has-error' }`
Foundation	`row: { valid: 'fv-has-success', invalid: 'error' }`
Pure	`row: { valid: 'fv-has-success', invalid: 'fv-has-error' }`
Semantic	`row: { valid: 'fv-has-success', invalid: 'error' }`
UIKit	`row: { valid: 'fv-has-success', invalid: 'fv-has-error' }`

By using your own classes for these options, you can easily customize the look and feel of valid and invalid fields:

.field-error .control-label,
.field-error .help-block,
.field-error .form-control-feedback {
    color: #ff0039;
}

.field-success .control-label,
.field-success .help-block,
.field-success .form-control-feedback {
    color: #2780e3;
}

$('#loginForm').formValidation({
    row: {
        valid: 'field-success',
        invalid: 'field-error'
    },
    fields: {
        ...
    }
});

<style type="text/css">
.field-error .control-label,
.field-error .help-block,
.field-error .form-control-feedback {
    color: #ff0039;
}

.field-success .control-label,
.field-success .help-block,
.field-success .form-control-feedback {
    color: #2780e3;
}
</style>

<form id="loginForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Username</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="username" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Password</label>
        <div class="col-xs-5">
            <input type="password" class="form-control" name="password" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#loginForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        row: {
            valid: 'field-success',
            invalid: 'field-error'
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    }
                }
            }
        }
    });
});
</script>