CODEWITHSUNDEEP
jquerycsstwitter-bootstrapjquery-validate
randomuser1
randomuser1

Reputation: 2803

how can I change the color of error text in bootstrap?

When you check out my fiddle: http://jsfiddle.net/5WMff/1311/ and e.g. put incorrect email address, you can see this:

Email Please enter a valid email address.
we will not send spam

The first text appears in bold black and the second one in red. I want the first one to appear in red and the second one should stay as it was at the very beginning. How can I do that? I'm using standard validator:

$('#invoiceForm').validate({
    rules: {
        companyName: {
            minlength: 2,
            required: true
        },
        contactName: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        address1: {
            minlength: 2,
            required: true
        }
    },
    highlight: function (element) {
        $(element).closest('.form-group').removeClass('success').addClass('has-error');
    },
    success: function (element) {
        element.addClass('valid')
            .closest('.form-group').removeClass('error').addClass('has-success');
    }
});

Upvotes: 2

Views: 2846

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

You're adding a class to the .form-group which contains the validation error. There are then CSS rules keyed off this class which are what is causing the style change. You can override this CSS to achieve what you require. Try this:

.has-error label.error {
    color: #a94442;
}
.has-error .help-block { 
    color: #737373;
}

Updated fiddle

Upvotes: 2

Related Questions