How to set red color for validation summary.

Question

User-209105085 posted

I'm trying to set font color to red for ValidationSumarry, Doesn't matter what options I try it always remain in black

@using (Html.BeginForm("Upload", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div>
        @Html.ValidationSummary("",new {@class = "myvalidation"})
        @Html.LabelFor(x => x.TaxYear)
        @Html.DropDownListFor(x => x.TaxYear, Model.GetTaxYears())       
        <div>
            @Html.LabelFor(x => x.File)
            @Html.TextBoxFor(x => x.File, new { type = "file" })               
        </div> 
    </div>
    <button type="submit">Upload</button>
}

and site.css I have

.myvalidation {
    color: red;
}

 

Answer 1

User2103319870 posted

You can try overriding the default css for validation helpers like given below

Try with the below updated css

 <style type="text/css">
        /* Styles for validation helpers*/
        .field-validation-error
        {
            color: #ff0000;
        }
        
        .field-validation-valid
        {
            display: none;
        }
        
        .input-validation-error
        {
            border: 1px solid #ff0000 !important;
            background-color: #ffeeee !important;
        }
        
        .validation-summary-errors
        {
            font-weight: bold !important;
            color: #ff0000 !important;
        }
        
        .validation-summary-valid
        {
            display: none;
        }
    </style>

Answer 2

User-193569704 posted

Hi lax4u

@Html.ValidationSummary(true,"",new {@style= "color: red"})

This might work. 

Thanx

Answer 3

User-1657171777 posted

The method for MVC 5 + Bootstrap is

@Html.ValidationSummary(true, "", new { @class = "text-danager" })

Answer 4

User831885415 posted

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}


select.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

add this to site.css

Answer 5

User-209105085 posted
I think my CSS was getting cached so I wasn't able to see the changes. After restarted VS it worked