Validation message color ASP.NET MVC 4

Question

I am using ASP.NET MVC 4 Razor.

I want to change the validation color message to Red. It's not working even if I change the CSS file.

My CSS file:

.field-validation-error {
  color: #E80C4D;
  font-weight: bold;
}

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

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

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

.validation-summary-errors {
  color: #E80C4D;
  font-weight: bold;
  font-size: 1.1em;
}

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

A part of my view:

<td>@Html.LabelFor(model => model.nom_candidat)</td>

<td>
    @Html.TextBoxFor(model => model.nom_candidat)
    @Html.ValidationMessageFor(Model => Model.nom_candidat)
</td>

Answer 1

You can pass a style attribute as the third argument to the ValidationMessageFor method in a razor view as such:

@Html.ValidationMessageFor(m=>m.StudentName, "", new { @style="color:red" })

For a more generic solution, you can also run your application trigger the validation message. In Chrome, right click the validation message and inspect the element, go to the debugger window and trace the class associated with the validation error message.

Go to file site.css and overwrite the default validation-error message class as shown below:

span.field-validation-error{
     color: red;
}