> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Ajouter des règles à vos champs de formulaire
> Définissez des champs obligatoires et des règles de validation sur les saisies de formulaire pour vous assurer que les visiteurs soumettent les données au bon format avant l'envoi du formulaire.
Vous pouvez définir des règles pour un élément. Les règles garantissent que vous collectez les bonnes données de formulaire au bon format.
## Option Required
Vous pouvez configurer des champs obligatoires dans vos widgets de formulaire. Si l'information n'a pas été renseignée par le visiteur, le champ sera invalide.
Si les utilisateurs ne remplissent pas un champ obligatoire :
* Votre élément passera à l'état **invalid**.
* Si vous avez ajouté un élément **FormErrorMessage** à votre formulaire, l'élément deviendra visible.
Tous les types d'éléments appartenant à la catégorie **Form** peuvent être rendus obligatoires. Si l'élément est un toggle, le visiteur doit le mettre sur ON. Si l'élément est une checkbox, l'utilisateur doit la cocher. Si l'élément est un champ de saisie, l'utilisateur ne peut pas le laisser vide.
### Exemple de cas d'utilisation
Supposons que vous souhaitiez rendre tous les éléments obligatoires : la saisie de l'adresse e-mail, deux listes déroulantes pour sélectionner une catégorie de newsletter et un toggle pour accepter les Conditions générales.
Sélectionnez chacun de ces éléments et activez le toggle **Required** sur ON.
## Règles de validation
### Règles de validation déclenchées lors de la soumission du formulaire
Dans tout ce qui suit, nous supposons le prérequis suivant : vous avez créé un événement définissant ce qui se passe lorsqu'un visiteur clique sur le bouton de soumission et que l'action associée envoie une requête HTTP.
Vous pouvez définir des règles de validation pour vérifier que les champs sont valides avant la soumission. Les règles de validation ne concernent que les éléments **Input** et **Textarea**.
Par exemple, si une saisie de texte contient des informations dans un format incorrect, le formulaire ne peut pas être envoyé. Vous pouvez configurer un message d'erreur pour demander au visiteur de corriger sa saisie.
Vous pouvez définir l'une de ces options :
* not empty
* only alphanumeric
* number
* email
* URL
* Text
* Length
* Regular expression
Par défaut, la validation n'a lieu que lorsqu'un visiteur clique sur le bouton de soumission.
Cependant, vous pouvez créer un Event pour vérifier le champ lorsqu'un visiteur cesse d'interagir avec lui.
#### FormErrorMessage
L'élément **FormErrorMessage** affiche un message lorsqu'une erreur est signalée lors de la validation.
Pour afficher un message d'erreur spécifique sur un élément de votre formulaire, vous devez utiliser un élément **Text** et l'associer à un événement.
### Ajout d'événements pour vérifier la validité de vos champs lors de la perte de focus
Vous pouvez définir des règles de validation pour vérifier que les champs sont valides lors de la perte de focus. Les règles de validation ne concernent que les éléments **Input** et **Textarea**.
Par exemple, si une saisie de texte contient des informations dans un format incorrect, un message d'erreur peut être envoyé au visiteur pour lui demander de corriger sa saisie.
Pour configurer cette règle de validation :
1. Accédez aux **Input settings** d'un élément.
2. Sélectionnez une **Validation rule** dans la liste.
3. Ajoutez un élément **Text** contenant le message d'erreur.
4. Placez le message d'erreur à côté du champ de saisie concerné.
5. Masquez le message d'erreur afin qu'il n'apparaisse que lorsque la valeur de la saisie est dans un format incorrect.
6. Accédez à la section **Events** du Widget Studio.
7. Ajoutez un événement **Form**.
8. Cliquez sur **By element form value**.
9. Sélectionnez une **Validation rule** dans le menu déroulant.
10. Cliquez sur **Add action**.
11. Sélectionnez **Show element** et choisissez votre élément de texte.
Lors de la perte de focus, la valeur de l'élément sera vérifiée, et si elle ne correspond pas à votre règle de validation, le message d'erreur apparaîtra dans le widget.
Vous pouvez également ajouter un événement spécifique pour vous assurer que le message d'erreur n'apparaît pas dans votre widget par défaut, mais uniquement lorsqu'une erreur est détectée lors de la perte de focus.
