Change Color of an Error Message using Annotation

Question

Where can I change the color of that ErrorMessage?

Answer 1

Normally you change this in CSS (usually found in ~/Content/css). See the styles:

• .field-validation-error - directly what you want
• .input-validation-error - assist if you want to modify the field itself when the error
• .validation-summary-errors - used if there is a separate error summary

They all have a counterpart to the valid state that can be used as well. In general it must be in normal state or hide error information.

You can do in view, but it’s not usually the best way, unless you have some specific condition that can’t be used in CSS:

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

It makes no sense to put in the annotation. Everything in its place. It is possible to use HTML/CSS inline. But what for? In view conditionally is understandable, although I can not see much use (see some), but putting something that is fixed in the application goes against the technology you are using. Changing external CSS is even more flexible.

If you want to insist it would be something like this:

[ErrorMessage = "<p style = 'color : blue;'>Preencha o nome do restaurante</p>")]

I put in the Github for future reference.

Answer 2

There are some ways to do this.

Only with CSS

According to To Microsoft these are the error classes you will have:

• field-validation-error. Defines the output of the Html.Validationmessage method when it’s Displaying an error.
• field-validation-Valid. Defines the output of the Html.Validationmessage method when there is no error.
• input-validation-error. Defines how Elements are rendered when there’s an error. (For example, you can use this class to set the background color of an element to a Different color if its value is invalid. ) This CSS class is used only During client validation (in ASP.NET Web Pages 2).
• input-validation-Valid. Defines the Appearance of Elements when there is no error.
• validation-Summary-errors. Defines the output of the Html.Validationsummary method it’s Displaying a list of errors.
• validation-Summary-Valid. Defines the output of the Html.Validationsummary method when there is no error.

With this, just overwrite the CSS for these classes, in this way:

<style>
.validation-summary-errors {
  border:2px solid red;
  color:red;
  font-weight:bold;
  margin:6px;
  width:30%;
}

.field-validation-error{
  color:red;
   font-weight:bold;
   background-color:yellow;
}

.input-validation-error{
  color:red;
  font-weight:bold;
  background-color:pink;
}
</style> 

Adding a new class to the message

You can add your stylized class to ValidationMessageFor(), in this way:

@Html.ValidationMessageFor(m=>m.Name, new { @class ="sua-classe-estilizada"})

And in his CSS, you would have your class:

<style>
    .sua-classe-estilizada{
        color: white;
    }
</style>

By Dataannotation

I wouldn’t advise it that way N reasons, but I will demonstrate that it is possible.

If you want to add something via DataAnnotations, you can do something appreciated with this:

public class EmployeeMetadata
{
    [Required]
    [Range(1, int.MaxValue, 
     ErrorMessage = "<img src='/images/error.png' /> 
      Invalid EmployeeID!")]
    public int EmployeeID { get; set; }

    [Required]
    [StringLength(20, 
     ErrorMessage = "<img src='/images/error.png' /> 
      Invalid first name!")]
    public string FirstName { get; set; }

    [Required]
    [StringLength(20, 
     ErrorMessage = "<img src='/images/error.png' /> 
      Invalid last name!")]
    public string LastName { get; set; }
}

And in his View would look like this:

@Html.Raw(
HttpUtility.HtmlDecode(
@Html.ValidationMessageFor(m=>m.EmployeeID).ToHtmlString()
))

That way, the result would be this:

Source: binaryintellect

There are other ways, such as returning via Ajax, custom return messages via jQuery, and what your mind imagines, because Razor is "converted" to HTML by "compiling".