Passer au contenu principal
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.