Aller au contenu principal

17-2 Messages d'erreur et DisplayName

Vous avez peut-être remarqué que les messages d'erreur ressemblent à ceci:

The Email field is required.

Le message est non seulement en anglais, mais utilise directement le nom de l'attribut du ViewModel. Cela pourrait entre autres causer des problèmes si un attribut a normalement un accent ou un caractère spécial à l'affichage.

Ajout de DisplayName au ViewModel​

On peut ajouter au ViewModel le Data Annotation DisplayName pour indiquer le nom du champ.

Snowfall.Web.Mvc/Models/Auth/ConnexionViewModel.cs
public class ConnexionViewModel
{
    [Required]
    [EmailAddress]
    [DisplayName("Courriel")]
    public string? Email { get; set; }
    
    [Required]
    [StringLength(16, MinimumLength = 8)]
    [DataType(DataType.Password)]
    [DisplayName("Mot de passe")]
    public string? Password { get; set; }
}

Vous aurez maintenant les bons noms de champ et les bons messages d'erreur (toujours en anglais cependant).

http://localhost:4200

Ajout de Prompt et placeholder​

Un champ input peut contenir un attribut placeholder qui assigne une valeur d'aperçus au champ de formulaire.

Le type de formulaire bootstrap utilisé (Floating labels) s'appuie sur la présence de l'attribut placeholder pour afficher une valeur par défaut dans le champ.

Pour être en accord avec les attentes de Bootstrap au niveau du formulaire, plutôt que DisplayName, il est possible de plutôt utiliser Display[Name="", Prompt=""].

La valeur de Prompt sera automatiquement associée à l'attribut placeholder du champ input du formulaire.

Snowfall.Web.Mvc/Models/Auth/ConnexionViewModel.cs
public class ConnexionViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Courriel", Prompt = "Courriel")]
    public string? Email { get; set; }
    
    [Required]
    [StringLength(16, MinimumLength = 8)]
    [DataType(DataType.Password)]
    [Display(Name = "Mot de passe", Prompt = "Mot de passe")]
    public string? Password { get; set; }
}

Vous pouvez maintenant retirer les attributs placeholder de votre formulaire de connexion. En effet asp-for s'occupera d'ajouter les attributs pour vous!

<form asp-controller="Auth" asp-action="Authentifier">
    <div class="form-floating mb-3">
        <input asp-for="Email" class="form-control"/>
        <label asp-for="Email">Courriel</label>
        <span asp-validation-for="Email" class="invalid-feedback"></span>
    </div>

    <div class="form-floating mb-3">
        <input type="password" asp-for="Password" class="form-control"/>
        <label asp-for="Password">Mot de passe</label>
        <span asp-validation-for="Password" class="invalid-feedback"></span>
    </div>

    <!-- ... -->

Cela devrait vous donner un formulaire contenant bien les placeholder, comme auparavant, sur les input.

img

Personnaliser les messages d'erreur​

On peut personnaliser les messages d'erreur via les Data Annotations en utilisant ErrorMessage sur l'attribut Required.

Par exemple:

Snowfall.Web.Mvc/Models/Auth/ConnexionViewModel.cs
public class ConnexionViewModel
{
    [Required(ErrorMessage = "Le champ courriel est requis.")]
    [EmailAddress(ErrorMessage = "Veuillez entrer une adresse courriel valide.")]
    [Display(Name = "Courriel", Prompt = "Courriel")]
    public string? Email { get; set; }
    
    [Required(ErrorMessage = "Le champ mot de passe est requis")]
    [StringLength(16, MinimumLength = 8, ErrorMessage = "Le mot de passe doit être entre {2} et {1} caractères")]
    [DataType(DataType.Password)]
    [Display(Name = "Mot de passe", Prompt = "Mot de passe")]
    public string? Password { get; set; }
}

Ce qui devrait maintenant vous donner des messages d'erreur personnalisés et en français!

img