Utiliser la validation d'entrée requise (Use Required Input Validation)

Informations d'arrière-plan

Vous pouvez utiliser la validation d'entrée requise pour informer l'utilisateur lors du runtime que l'entrée d'une commande est obligatoire en définissant la propriété Requis (Required) sur =true. Vous pouvez également paramétrer un message d'erreur si la commande n'est pas renseignée en runtime à l'aide de la propriété Message d'erreur requis.

Vous pouvez ajouter du texte à côté de la commande à l'aide de la nouvelle propriété Libellé (Label). Vous pouvez placer le libellé au-dessus ou à gauche de la commande en utilisant la propriété Emplacement du libellé (Label Placement) de l'onglet Style.

Cette propriété est actuellement disponible pour les commandes d'entrée suivantes :

• Sélecteur de date
• Liste déroulante
• Sélecteur de fichiers
• Liste déroulante à sélection multiple
• Bouton radio
• Slider
• Zone de texte
• Zone de texte

Dans l'exercice ci-dessous, nous allons créer un formulaire simple avec la validation d'entrée requise. Vous pouvez utiliser cet exercice pour mieux comprendre le fonctionnement de la validation des entrées requises et apprendre à l'utiliser efficacement dans vos applications.

Création d'un formulaire à l'aide de la validation des entrées requises

Étapes

1. Ouvrez votre application déjà existante ou lancez-en une nouvelle.

2. Ajoutez une commande Bouton (Button) à votre application.

   • Ajoutez Subscribe dans la propriété Texte (Text).
     
     

     

     
     

3. Ajoutez une nouvelle page vierge à votre application.

   • Renommez la page en Page d'abonnement (Subscribe Page).

4. Ajoutez une commande d'affichage En-tête (Header) en haut de la page.

   • Ajoutez Subscribe to this app dans la propriété Texte (Text).

5. Ajoutez une commande Zone de texte (Textbox) sous l'en-tête.

   • Renommez-la en Name.
   • Ajoutez Name: dans la propriété Libellé (Label).
   • Définissez la propriété Requis (Required) de la Validation sur =true.

6. Ajoutez une commande Zone de texte (Textbox) sous la zone de texte Nom (Name).

   • Renommez-la en Email.
   • Ajoutez Email: dans la propriété Libellé (Label).
   • Définissez la propriété Requis (Required) de la Validation sur =true.

Ajoutez une commande Sélecteur de date (Datepicker) sous la dernière zone de texte.

• Renommez-la en Date of birth.
• Ajoutez Date of birth: dans la propriété Libellé (Label).

Définissez la propriété Requis (Required) de la Validation sur =true.

Remarque :

Chacune de ces commandes possède une propriété EstValide (isValid). Cette propriété nous dira si une commande est valide ou non.

Par défaut, lorsque la propriété Requis (Required) d'une commande est définie sur =true, la commande ne sera pas valide.

1. Ajoutez une commande Bouton (Button) sous le sélecteur de date.

   • Ajoutez Submit dans la propriété Texte (Text).
   • Dans la propriété Désactivé (Disabled), utilisez la propriété EstValid (isValid) des commandes précédemment configurées pour créer l'expression suivante : =! Name.isValid || !Email.isValid || !Date of birth.isValid.
     
     

     

     
     

2. Accédez au bouton S'abonner (Subscribe) de la Page principale (Main Page) et configurez l'événement Cliqué (Clicked on).

   • Ajoutez une règle Ouvrir une page (Open a Page).
   • Ajoutez la Page d'abonnement (Subscribe Page) dans le champ Quelle page ouvrir (What page to open).

   • Cochez la case Afficher comme Pop-Over (Show as Pop-Over) (Modal).

     
     

     

     
     

Résultats de la procédure

Après avoir suivi toutes les étapes ci-dessus, vous pouvez lancer l'aperçu de votre application.

En mode aperçu, si vous cliquez sur le bouton S'abonner (Subscribe), la Page d'abonnement (Subscribe Page) s'ouvrira. Notez que le bouton Envoyer (Submit) est désactivé et qu'il ne s'active que lorsque tous les champs obligatoires sont remplis.

Remarque :

Si vous saisissez une valeur dans un champ puis la supprimez, un message d'erreur s'affiche et le bouton est à nouveau désactivé.