Aller au contenu principal

29-4 Validations

Il est facile de valider les formulaires puisqu'ils sont liés à des modèles (DTO) et que des validations via DataAnnotation sont appliquées à ces derniers.

Ajout de <DataAnnotationsValidator />​

Pour ajouter le support des validations via DataAnnotation, ajoutez simplement <DataAnnotationsValidator /> à l'intérieur de EditForm.

Snowfall.Web.Admin/Pages/Evenements/New.razor
<!-- ... -->

<div class="col-lg-6">
    <EditForm Model="_creerEvenementDto" OnSubmit="GererSubmit">
        <DataAnnotationsValidator />
        
        <div class="form-floating mb-3">
            <InputText id="nom" class="form-control" placeholder="Nom" @bind-Value="_creerEvenementDto.Nom"/>
            <label asp-for="nom">Nom</label>
        </div>

<!-- ... -->

Afficher le message d'erreur associé via <ValidationMessage>​

Ensuite, il suffit d'ajouter le composant <ValidationMessage> aux endroits où vous désirez afficher un message d'erreur lié à un champ.

Snowfall.Web.Admin/Pages/Evenements/New.razor
<div class="col-lg-6">
    <EditForm Model="_creerEvenementDto" OnSubmit="GererSubmit">
        <DataAnnotationsValidator />
        
        <div class="form-floating mb-3">
            <InputText id="nom" class="form-control" placeholder="Nom" @bind-Value="_creerEvenementDto.Nom"/>
            <label asp-for="nom">Nom</label>
            <ValidationMessage class="invalid-feedback" For="@(() => _creerEvenementDto.Nom)" />
        </div>

<!-- ... -->
info
  • ValidationMessage est un composant de Blazor permettant d'afficher les messages d'erreur automatiquement
  • For= prends en paramètre une fonction anonyme identifiant le champ du modèle auquel la validation s'applique.

Support pour les messages d'erreur bootstrap invalid-feedback​

Bootstrap affiche les messages d'erreur via la classe CSS .invalid-feedback. Par défaut, les éléments ayant la classe .invalid-feedback sont cachés.

Pour que le message soit affiché, il doit être adjacent à un champ (input par exemple) ayant la classe css .is-invalid.

Or, Blazor assigne la classe css .invalid au input (et non .is-invalid). Il est difficile de changer ce comportement, alors qu'il est assez facile de modifier Bootstrap puisqu'on utilise du Sass! 😎

Ajoutez ceci à votre app.scss (ou fichier _general.scss si vous l'avez et qu'il est importé dans app.scss):

Snowfall.Web.Admin/assets/scss/app.scss
//...

.invalid {
  @extend .is-invalid;
}

//...
info

L'idée ici est qu'on dit que la classe CSS .invalid "extend" .is-invalid de Bootstrap et aura donc le même comportement.

L'effet est qu'un élément ayant la classe CSS .invalid-feedback sera aussi affiché lorsqu'adjacent à un input avec la classe .invalid.

Utilisation de OnValidSubmit pour déclencher les validations​

Plutôt que OnSubmit sur le formulaire, on peut utiliser OnValidSubmit. Comme le nom l'indique, cela aura pour effet de déclencher le processus de validation et de ne pas permettre de soumettre le formulaire tant et aussi longtemps que ce dernier n'est pas valide.

Snowfall.Web.Admin/Pages/Evenements/New.razor
<!-- ... -->

<div class="col-lg-6">
    <EditForm Model="_creerEvenementDto" OnValidSubmit="GererSubmit">
        <DataAnnotationsValidator />

<!-- ... -->

Test​

Vous pouvez essayer de soumettre le formulaire et tout champ n'étant pas valide sera affiché en rouge, plus un message d'erreur pour Nom (puisqu'il est le seul pour lequel on a ajouté <ValidationMessage>)

Imgur

Compléter pour les autres champs​

Il suffit de compléter pour les autres champs en ajoutant le composant <ValidationMessage> à ces derniers.

Je vous laisse le soin de le faire 🙂

Imgur

Vous pouvez réessayer et les messages d'erreur devraient être affichés pour les autres champs.

Modifier et traduire les messages génériques​

Peut-être avez-vous remarqué que si vous n'entrez rien dans un champ qui a une valeur par défaut (0 pour capacité par exemple), vous avec un message d'erreur du genre:

img

Ce message d'erreur vient d'une erreur de Parsing en bon français. Pour modifier cette erreur, on peut ajouter une propriété ParsingErrorMessage sur le champ et préciser le message.

Par exemple:

<div class="form-floating mb-3">
    <InputNumber id="capacite"
                    class="form-control"
                    placeholder="Capacité"
                    ParsingErrorMessage="La capacité doit être un nombre"
                    @bind-Value="_creerEvenementDto.Capacite"/>

img

info

Vous pouvez évidemment lier le tout à un fichier ressource.