Skip to main content
Adição de mais informações
Fonte Link
Randrade
  • 21,9mil
  • 5
  • 53
  • 133

###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".

###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".

Fonte Link
Randrade
  • 21,9mil
  • 5
  • 53
  • 133

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>