1

Onde posso mudar a cor dessa ErrorMessage?

Onde mudo a cor dessa Error Message?

1
  • Como está seu código, especialmente a view e CSS?
    – Maniero
    Commented 6/10/2016 às 23:09

2 Respostas 2

2

Normalmente você muda isso no CSS (normalmente encontrado em ~/Content/css). Veja os estilos:

  • .field-validation-error - diretamente o que deseja
  • .input-validation-error - auxiliar se quiser modificar o próprio campo quando a erro
  • .validation-summary-errors - usado se há um resumo de erros separado

Todos eles possuem uma contrapartida para o estado válido que pode ser usado também. Em geral ele deve estar no estado normal ou esconder a informação de erro.

Você pode fazer na view, mas não costuma ser a melhor forma, a não ser que tenha alguma condição específica que não pode ser usada no CSS:

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

Não faz sentido colocar na anotação. Cada coisa no seu lugar. É possível usar HTML/CSS inline. Mas pra que? Na view de forma condicional é compreensível, ainda que não consigo ver muita utilidade (vejo alguma), mas colocar algo que é fixo na aplicação vai contra a tecnologia que está usando. Mudar no CSS externo é até mais flexível.

Se quiser insistir seria algo assim:

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

Coloquei no GitHub para referência futura.

1

Existe algumas formas de como fazer isso.

Apenas com CSS

Segundo A Microsoft essas são as classes de erros que você terá:

  • 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.

Com isso, basta sobrescrever o CSS para essas classes, desta forma:

<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> 

Adicionando uma nova classe à mensagem

Você pode adicionar a sua classe estilizada aos ValidationMessageFor(), desta forma:

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

E em seu CSS, você teria sua classe:

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

Por DataAnnotation

Não aconselho essa forma por N motivos, mas irei demonstrar que é possível.

Caso queira adicionar algo via DataAnnotations, você pode fazer algo aprecido com isso:

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; }
}

E em sua View ficaria assim:

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

Dessa forma, o resultado seria isso:

inserir a descrição da imagem aqui

Fonte: binaryintellect

Existem outras formas, como retorno via Ajax, mensagens customizadas de retorno via jQuery, e o que sua mente imaginar, pois o Razor é "convertido" em HTML ao "compilar".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .