Valider l’entrée utilisateur implicitement sans écrire de code de validation

Dans un formulaire, vous devez fournir des instructions à l’utilisateur du site web sur la façon d’entrer correctement chaque valeur. Vous devez également vérifier les valeurs entrées. Blazor fournit des outils simples qui peuvent effectuer cette validation avec le minimum de code personnalisé.

Dans cette unité, vous allez apprendre à annoter des modèles afin que Blazor sache les données à attendre. Vous apprenez également à configurer un formulaire afin qu’il valide et répond correctement aux données utilisateur.

Valider l’entrée utilisateur dans les formulaires Blazor

Quand vous collectez des informations à partir de l’utilisateur d’un site web, il est important de vérifier que ces données sont pertinentes et au format correct :

• Pour des raisons professionnelles : les informations client telles qu’un numéro de téléphone ou des détails de commande doivent être correctes pour donner un bon service aux utilisateurs. Par exemple, si votre page web est en mesure d’identifier un numéro de téléphone malformé dès la saisie, vous pouvez éviter des retards coûteux ultérieurement.
• Pour des raisons techniques : si votre code utilise l’entrée de formulaire pour les calculs ou d’autres traitements, une entrée incorrecte peut entraîner des erreurs et des exceptions.
• Pour des raisons de sécurité : les utilisateurs malveillants peuvent essayer d’injecter du code en exploitant des champs d’entrée qui ne sont pas vérifiés.

Les utilisateurs de sites web sont familiarisés avec les règles de validation qui vérifient la présence et le format correct des informations qu’ils entrent. Les champs obligatoires sont souvent marqués avec un astérisque ou une étiquette Obligatoire . S’ils omettent une valeur ou entrent une valeur mal mise en forme, ils voient un message de validation leur indiquer comment corriger le problème. Le message de validation peut s’afficher lorsque l’utilisateur sort d’un champ ou lorsqu’il sélectionne le bouton Envoyer .

Voici un exemple de formulaire dans lequel l’utilisateur envoie des données non valides. Dans ce cas, des messages de validation s’affichent en bas du formulaire et les champs non valides sont mis en évidence en rouge. Vous allez générer ce formulaire dans l’exercice suivant :

Il est judicieux de créer des messages de validation aussi utiles que possible. Ne partez pas du principe que l’utilisateur a des connaissances ; par exemple, tout le monde ne connaît pas le format d’une adresse e-mail valide.

Quand vous utilisez le composant EditForm dans Blazor, vous disposez d’options de validation polyvalentes disponibles sans écrire de code complexe :

• Dans votre modèle, vous pouvez utiliser des annotations de données sur chaque propriété pour indiquer à Blazor quand les valeurs sont requises et dans quel format elles doivent figurer.
• Dans votre EditForm composant, ajoutez le composant DataAnnotationsValidator , qui vérifie les annotations de modèle par rapport aux valeurs entrées de l’utilisateur.
• Utilisez le composant ValidationSummary lorsque vous souhaitez afficher un résumé de tous les messages de validation dans un formulaire soumis.
• Utilisez le composant ValidationMessage lorsque vous souhaitez afficher le message de validation d’une propriété de modèle spécifique.

Préparer les modèles pour la validation

Commencez par indiquer au composant DataAnnotationsValidator à quoi ressemblent les données valides. Vous déclarez des restrictions de validation à l’aide d’attributs d’annotation dans votre modèle de données. Prenons l’exemple suivant :

using  System.ComponentModel.DataAnnotations;

public class Pizza
{
    public int Id { get; set; }
    
    [Required]
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    [EmailAddress]
    public string ChefEmail { get; set;}
    
    [Required]
    [Range(10.00, 25.00)]
    public decimal Price { get; set; }
}

Nous utilisons ce modèle dans un formulaire qui permet au personnel Blazing Pizza d’ajouter de nouvelles pizzas au menu. Il comprend l’attribut [Required] pour s’assurer que les valeurs Name et Price sont toujours remplies. Il utilise également l’attribut [Range] pour vérifier que le prix entré est compris dans une plage plausible pour une pizza. Enfin, il utilise l’attribut [EmailAddress] pour vérifier que la valeur ChefEmail entrée est une adresse e-mail valide.

Les autres annotations que vous pouvez utiliser dans un modèle sont les suivantes :

• [ValidationNever] : Utilisez cette annotation quand vous souhaitez vous assurer que le champ n’est jamais inclus dans la validation.
• [CreditCard] : Utilisez cette annotation quand vous souhaitez enregistrer un numéro de carte de crédit valide de l’utilisateur(-trice).
• [Compare] : Utilisez cette annotation quand vous souhaitez vous assurer que deux propriétés du modèle correspondent.
• [Phone] : Utilisez cette annotation quand vous souhaitez enregistrer un numéro de téléphone valide de l’utilisateur(-trice).
• [RegularExpression] : Utilisez cette annotation pour vérifier le format d’une valeur en la comparant à une expression régulière.
• [StringLength] : Utilisez cette annotation pour vérifier que la longueur d’une valeur de chaîne ne dépasse pas une longueur maximale.
• [Url] : Utilisez cette annotation quand vous souhaitez enregistrer une URL valide de l’utilisateur(-trice).

Ajouter des composants de validation au formulaire

Pour configurer votre formulaire afin d’utiliser la validation d’annotation de données, vérifiez d’abord que le contrôle d’entrée est lié aux propriétés du modèle. Ensuite, ajoutez le composant DataAnnotationsValidator quelque part dans le EditForm composant. Pour afficher les messages générés par la validation, utilisez le composant ValidationSummary , qui affiche tous les messages de validation pour tous les contrôles du formulaire. Si vous préférez afficher les messages de validation en regard de chaque contrôle, utilisez plusieurs composants ValidationMessage . N’oubliez pas de lier chaque contrôle ValidationMessage à une propriété spécifique du modèle à l’aide de l’attribut For :

@page "/admin/createpizza"

<h1>Add a new pizza</h1>

<EditForm Model="@pizza">
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <InputText id="name" @bind-Value="pizza.Name" />
    <ValidationMessage For="@(() => pizza.Name)" />
    
    <InputText id="description" @bind-Value="pizza.Description" />
    
    <InputText id="chefemail" @bind-Value="pizza.ChefEmail" />
    <ValidationMessage For="@(() => pizza.ChefEmail)" />
    
    <InputNumber id="price" @bind-Value="pizza.Price" />
    <ValidationMessage For="@(() => pizza.Price)" />
</EditForm>

@code {
    private Pizza pizza = new();
}

Contrôler la validation du formulaire de votre application

Blazor effectue une validation à deux moments différents :

• La validation de champ est exécutée lorsqu’un utilisateur quitte un champ en appuyant sur la touche Tab. La validation de champ garantit qu’un utilisateur est informé du problème de validation le plus rapidement possible.
• La validation du modèle est exécutée lorsque l’utilisateur envoie le formulaire. La validation de modèle garantit que les données non valides ne sont pas stockées.

Si un formulaire échoue, les messages s’affichent dans les composants ValidationSummary et ValidationMessage . Pour personnaliser ces messages, vous pouvez ajouter un attribut ErrorMessage à l’annotation de données pour chaque champ du modèle :

public class Pizza
{
    public int Id { get; set; }
    
    [Required(ErrorMessage = "You must set a name for your pizza.")]
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    [EmailAddress(ErrorMessage = "You must set a valid email address for the chef responsible for the pizza recipe.")]
    public string ChefEmail { get; set;}
    
    [Required]
    [Range(10.00, 25.00, ErrorMessage = "You must set a price between $10 and $25.")]
    public decimal Price { get; set; }
}

Les attributs de validation intégrés sont polyvalents, et vous pouvez utiliser des expressions régulières pour effectuer une vérification par rapport à de nombreux types de modèles de texte. Toutefois, si vous avez des exigences spécifiques ou inhabituelles concernant la validation, vous ne pourrez peut-être pas les satisfaire précisément avec les attributs intégrés. Dans ce cas, vous pouvez créer un attribut de validation personnalisé. Commencez par créer une classe qui hérite de la classe ValidationAttribute et remplace la méthode IsValid :

public class PizzaBase : ValidationAttribute
{
    public string GetErrorMessage() => $"Sorry, that's not a valid pizza base.";

    protected override ValidationResult IsValid(
        object value, ValidationContext validationContext)
    {
        if (value != "Tomato" || value != "Pesto")
        {
            return new ValidationResult(GetErrorMessage());
        }

        return ValidationResult.Success;
    }
}

À présent, vous pouvez utiliser votre attribut de validation personnalisé quand vous utilisez les attributs intégrés dans la classe de modèle :

public class Pizza
{
    public int Id { get; set; }
    
    [Required(ErrorMessage = "You must set a name for your pizza.")]
    public string Name { get; set; }
    
    public string Description { get; set; }
    
    [EmailAddress(
        ErrorMessage = "You must set a valid email address for the chef responsible for the pizza recipe.")]
    public string ChefEmail { get; set;}
    
    [Required]
    [Range(10.00, 25.00, ErrorMessage = "You must set a price between $10 and $25.")]
    public decimal Price { get; set; }
    
    [PizzaBase]
    public string Base { get; set; }
}

Traiter les validations de formulaire côté serveur lors de l’envoi du formulaire

Quand vous utilisez un composant EditForm, trois événements sont disponibles pour répondre à l’envoi d’un formulaire :

• OnSubmit : cet événement se déclenche chaque fois que l’utilisateur envoie un formulaire, quels que soient les résultats de la validation.
• OnValidSubmit : cet événement se déclenche quand l’utilisateur envoie un formulaire et que les entrées sont validées.
• OnInvalidSubmit : cet événement se déclenche quand l’utilisateur envoie un formulaire et que la validation des entrées échoue.

Si vous utilisez OnSubmit, les deux autres événements ne sont pas déclenchés. Au lieu de cela, vous pouvez utiliser le paramètre EditContext pour vérifier si les données entrées doivent être traitées ou non. Utilisez cet événement quand vous souhaitez écrire votre propre logique pour gérer l’envoi de formulaire :

@page "/admin/createpizza"

<h1>Add a new pizza</a>

<EditForm Model="@pizza" OnSubmit=@HandleSubmission>
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <InputText id="name" @bind-Value="pizza.Name" />
    <ValidationMessage For="@(() => pizza.Name)" />
    
    <InputText id="description" @bind-Value="pizza.Description" />
    
    <InputText id="chefemail" @bind-Value="pizza.ChefEmail" />
    <ValidationMessage For="@(() => pizza.ChefEMail)" />
    
    <InputNumber id="price" @bind-Value="pizza.Price" />
    <ValidationMessage For="@(() => pizza.Price" />
</EditForm>

@code {
    private Pizza pizza = new();
    
    void HandleSubmission(EditContext context)
    {
        bool dataIsValid = context.Validate();
        if (dataIsValid)
        {
            // Store valid data here
        }
    }
}

Si vous utilisez OnValidSubmit et OnInvalidSubmit à la place, vous n’êtes pas obligé de vérifier l’état de validation dans chaque gestionnaire d’événements :

@page "/admin/createpizza"

<h1>Add a new pizza</a>

<EditForm Model="@pizza" OnValidSubmit=@ProcessInputData OnInvalidSubmit=@ShowFeedback>
    <DataAnnotationsValidator />
    <ValidationSummary />
    
    <InputText id="name" @bind-Value="pizza.Name" />
    <ValidationMessage For="@(() => pizza.Name)" />
    
    <InputText id="description" @bind-Value="pizza.Description" />
    
    <InputText id="chefemail" @bind-Value="pizza.ChefEmail" />
    <ValidationMessage For="@(() => pizza.ChefEMail)" />
    
    <InputNumber id="price" @bind-Value="pizza.Price" />
    <ValidationMessage For="@(() => pizza.Price" />
</EditForm>

@code {
    private Pizza pizza = new();
    
    void ProcessInputData(EditContext context)
    {
        // Store valid data here
    }
    
    void ShowFeedback(EditContext context)
    {
        // Take action here to help the user correct the issues
    }
}