{"id":124622,"date":"2018-02-16T12:30:29","date_gmt":"2018-02-16T11:30:29","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/adding-conditions-to-interactions\/"},"modified":"2025-02-03T16:45:03","modified_gmt":"2025-02-03T15:45:03","slug":"adding-conditions-to-interactions","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/ajouter-conditions-interactions","title":{"rendered":"Ajouter des conditions aux interactions"},"content":{"rendered":"<p>Vous pouvez ajouter des conditions dans vos projets pour d\u00e9finir quand un \u00e9v\u00e9nement doit ou ne doit pas se d\u00e9clencher. Vous pouvez les utiliser pour cr\u00e9er des exp\u00e9riences utilisateur de haute qualit\u00e9, y compris : <\/p>\n<ul>\n<li>Validation du formulaire<\/li>\n<li>Navigation conditionnelle dans l&rsquo;\u00e9cran<\/li>\n<li>\u00c9crans de verrouillage \u00e0 combinaison<\/li>\n<li>Animations<\/li>\n<li>&#8230;et bien d&rsquo;autres choses encore.<\/li>\n<\/ul>\n<p>Dans ce tutoriel, vous apprendrez les bases du constructeur d&rsquo;expressions, que vous utiliserez pour cr\u00e9er des conditions.<\/p>\n<h2><a id=\"build-event\"><\/a>Cr\u00e9er un \u00e9v\u00e9nement<\/h2>\n<p>Avant d&rsquo;ajouter une condition, vous devez cr\u00e9er un \u00e9v\u00e9nement dans votre projet. Par exemple, imaginez que vous cr\u00e9ez un formulaire d&rsquo;inscription \u00e0 une lettre d&rsquo;information avec un champ de saisie <kbd>F<\/kbd> et un bouton <kbd>B.<\/kbd> Lorsque vous soumettez le formulaire, vous souhaitez cr\u00e9er un lien vers un autre \u00e9cran. <video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" verify-email-example.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Exemple d&#8217;email de v\u00e9rification<\/video><br \/>\nPour cr\u00e9er cet \u00e9v\u00e9nement :  <\/p>\n<ol>\n<li>S\u00e9lectionnez le bouton, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43973\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-event-condition.png\" alt=\"Cliquez sur le bouton \"ajouter un \u00e9v\u00e9nement\" dans la palette des \u00e9v\u00e9nements.\" width=\"1253\" height=\"729\"><\/li>\n<li>Cr\u00e9ez un \u00e9v\u00e9nement <strong>\u00ab\u00a0On Click<\/strong> + <strong>Navigate To\u00a0\u00bb<\/strong> et s\u00e9lectionnez un autre \u00e9cran pour y acc\u00e9der.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43975\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Nav-To-Condition-Event.png\" alt=\"En cliquant sur Naviguer vers l'\u00e9v\u00e9nement, vous acc\u00e9dez \u00e0 l'\u00e9cran 2.\" width=\"1107\" height=\"700\">\n<div><strong>Remarque :<\/strong> pour les projets concernant les t\u00e9l\u00e9phones portables et les tablettes, le terme \u00a0\u00bb <strong>On Click\u00a0\u00bb<\/strong> sera remplac\u00e9 par <strong>\u00ab\u00a0On Tap\u00a0\u00bb.<\/strong><\/div>\n<\/li>\n<\/ol>\n<p>L&rsquo;\u00e9v\u00e9nement que vous venez de cr\u00e9er s&rsquo;affiche dans la palette \u00c9v\u00e9nements, o\u00f9 un lien de texte intitul\u00e9 \u00ab\u00a0Ajouter une condition\u00a0\u00bb appara\u00eet.<\/p>\n<h2><a id=\"define-condition\"><\/a>D\u00e9finir une condition<\/h2>\n<p>Vous ne voulez pas pouvoir soumettre le formulaire d&rsquo;inscription \u00e0 la lettre d&rsquo;information si vous n&rsquo;avez pas saisi d&rsquo;informations dans le formulaire, c&rsquo;est pourquoi vous devez ajouter une condition \u00e0 cet \u00e9v\u00e9nement. Cliquez sur le texte \u00ab\u00a0ajouter une condition\u00a0\u00bb au-dessus de l&rsquo;\u00e9v\u00e9nement que vous avez cr\u00e9\u00e9 dans la palette \u00c9v\u00e9nements. Vous verrez appara\u00eetre le g\u00e9n\u00e9rateur d&rsquo;expressions conditionnelles. Voici \u00e0 quoi il ressemble :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43969\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Conditional-expression-builder.png\" alt=\"D\u00e9finition du constructeur d'expressions conditionnelles\" width=\"1746\" height=\"1102\"><\/p>\n<ol class=\"image-bullet\">\n<li><strong>L&rsquo;expression<\/strong> &#8211; vous ferez glisser des composants ici pour construire la condition.<\/li>\n<li><strong>Fonctions<\/strong> &#8211; cet onglet contient des options permettant de d\u00e9finir la logique et d&rsquo;autres comparaisons entre les \u00e9l\u00e9ments.<\/li>\n<li><strong>Constantes<\/strong> &#8211; trouvez ici des valeurs fixes, comme la largeur ou la hauteur de l&rsquo;\u00e9cran du projet, l&rsquo;heure de votre ordinateur ou des formules d&rsquo;expressions r\u00e9guli\u00e8res.<\/li>\n<li><strong>Aper\u00e7u du canevas<\/strong> &#8211; faites glisser des \u00e9l\u00e9ments de l&rsquo;\u00e9cran vers l&rsquo;expression. Vous ne pourrez utiliser que les \u00e9l\u00e9ments de l&rsquo;\u00e9cran actuel. <\/li>\n<li><strong>Variables<\/strong> &#8211; affichez et utilisez les variables de votre projet dans l&rsquo;expression.<\/li>\n<li><strong>Ma\u00eetres des donn\u00e9es<\/strong> &#8211; trouvez ici vos ma\u00eetres des donn\u00e9es et leurs champs pour les utiliser dans une expression.<\/li>\n<\/ol>\n<p>Pour cr\u00e9er une condition, vous pouvez faire glisser et d\u00e9poser n&rsquo;importe lequel de ces \u00e9l\u00e9ments, constantes et fonctions logiques dans l&rsquo;expression. Par exemple, pour cr\u00e9er la condition qui v\u00e9rifie si le formulaire d&rsquo;inscription est vide : <\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 61%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742299808\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ol>\n<li>Regardez l&rsquo;aper\u00e7u du canevas. S\u00e9lectionnez le champ de texte de saisie et faites-le glisser jusqu&rsquo;\u00e0 l&rsquo;espace libre de l&rsquo;expression \u00ab\u00a0cliquez pour modifier ou faites glisser un composant\u00a0\u00bb. <\/li>\n<li>Dans l&rsquo;onglet <strong>Fonctions<\/strong>, faites d\u00e9filer la page jusqu&rsquo;\u00e0 la section \u00ab\u00a0Logique\u00a0\u00bb. Faites glisser une fonction <strong>Pas \u00e9gal (\u2260)<\/strong> \u00e0 c\u00f4t\u00e9 du champ de texte de l&rsquo;expression. <\/li>\n<li>Vous verrez un nouvel espace ouvert appara\u00eetre dans l&rsquo;expression. Double-cliquez sur cet espace, mais laissez-le vide. <\/li>\n<li>Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;expression.<\/li>\n<\/ol>\n<p>L&rsquo;expression que vous venez de cr\u00e9er v\u00e9rifiera si le champ de texte d&rsquo;entr\u00e9e n&rsquo;est pas vide. S&rsquo;il ne l&rsquo;est pas, vous passerez \u00e0 l&rsquo;\u00e9cran suivant. S&rsquo;il est vide, l&rsquo;\u00e9v\u00e9nement ne se d\u00e9clenchera pas. Passez au tutoriel suivant et apprenez \u00e0 cr\u00e9er d&rsquo;autres conditions dans vos projets.  <\/p>\n<h2>Comment faire : apprenez \u00e0 concevoir des cas d&rsquo;utilisation courants.<\/h2>\n<p>Vous pouvez utiliser des conditions dans vos projets pour cr\u00e9er des exp\u00e9riences utilisateur dynamiques, comme la navigation conditionnelle, la validation des messages d&rsquo;erreur\/formulaires, et bien plus encore. Consultez les exercices ci-dessous pour des exemples d&rsquo;utilisation dans Justinmind. <\/p>\n<h2><a id=\"conditional-navigation\"><\/a>Navigation conditionnelle<\/h2>\n<p>Dans ce mode d&#8217;emploi, vous apprendrez \u00e0 construire une condition simple qui v\u00e9rifie quelle valeur vous s\u00e9lectionnez dans une liste d\u00e9roulante. Vous \u00e9tablirez ensuite un lien vers l&rsquo;\u00e9cran correspondant.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/conditional-navigation-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" conditional-navigation-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/conditional-navigation-example.png\" alt=\"Exemple de navigation conditionnelle\">Exemple de navigation conditionnelle<\/video><\/p>\n<h3>Design de l&rsquo;exemple<\/h3>\n<ol>\n<li>Cr\u00e9ez un \u00e9cran de recherche avec des textes et des rectangles. Ajoutez un bouton et intitulez-le \u00ab\u00a0Recherche\u00a0\u00bb. <\/li>\n<li>Ajoutez un widget Dropdown\/Select List au Canvas et donnez-lui le style que vous souhaitez. Vous le trouverez dans le menu d\u00e9roulant de la barre d&rsquo;outils sous \u00ab\u00a0Champs de saisie interactifs\u00a0\u00bb. <\/li>\n<li>Une fois la liste d\u00e9roulante s\u00e9lectionn\u00e9e, acc\u00e9dez \u00e0 la palette Propri\u00e9t\u00e9s et cliquez sur \u00ab\u00a0Modifier les valeurs\u00a0\u00bb. Supprimez toutes les valeurs de la bo\u00eete de dialogue et ajoutez-en deux nouvelles : \u00ab\u00a0Maisons\u00a0\u00bb et \u00ab\u00a0Appartements\u00a0\u00bb. <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 10px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/edit-dropdown-values.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" edit-dropdown-values.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/edit-dropdown-values.png\" alt=\"Modifier les valeurs de la liste d\u00e9roulante\">Modifier les valeurs de la liste d\u00e9roulante<\/video><\/li>\n<li>Cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb de la palette d&rsquo;\u00e9crans et cr\u00e9ez deux nouveaux \u00e9crans. Nommez l&rsquo;un \u00ab\u00a0Maisons\u00a0\u00bb et l&rsquo;autre \u00ab\u00a0Appartements\u00a0\u00bb. Personnalisez ces \u00e9crans comme vous le souhaitez.  <\/li>\n<\/ol>\n<h3>Cr\u00e9er les \u00e9v\u00e9nements<\/h3>\n<ol>\n<li>Revenez \u00e0 l&rsquo;\u00e9cran de recherche et s\u00e9lectionnez le bouton \u00ab\u00a0Recherche\u00a0\u00bb. Acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb. Cr\u00e9ez un \u00e9v\u00e9nement <strong>\u00ab\u00a0On Tap<\/strong> + <strong>Navigate To\u00a0\u00bb<\/strong> et choisissez l&rsquo;\u00e9cran Maisons comme cible.  <\/li>\n<li>Dans la palette \u00c9v\u00e9nements, vous trouverez l&rsquo;\u00e9v\u00e9nement que vous venez de cr\u00e9er. Cliquez sur le lien \u00ab\u00a0Ajouter une condition\u00a0\u00bb au-dessus de l&rsquo;action, ce qui ouvrira le g\u00e9n\u00e9rateur d&rsquo;expressions conditionnelles. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44012\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-condition-nav.png\" alt=\"Ajouter un lien de texte de condition dans la palette d'\u00e9v\u00e9nements\" width=\"1444\" height=\"819\"><\/li>\n<li>Suivez les \u00e9tapes suivantes pour cr\u00e9er la condition :\n<ul class=\"hidden-bullet\">\n<li>\n<div class=\"embed-container\" style=\"padding-bottom: 62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/743400826\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li><strong>a.<\/strong>  Regardez l&rsquo;aper\u00e7u du canevas et faites glisser le menu d\u00e9roulant jusqu&rsquo;\u00e0 l&rsquo;espace ouvert dans l&rsquo;expression intitul\u00e9e \u00ab\u00a0Cliquez pour modifier ou glisser-d\u00e9poser un composant\u00a0\u00bb.<\/li>\n<li><strong>b.<\/strong> Faites glisser la fonction logique <strong>\u00c9gal (=)<\/strong> \u00e0 c\u00f4t\u00e9 de la liste d\u00e9roulante de l&rsquo;expression.<\/li>\n<li><strong>c.<\/strong>  Vous verrez appara\u00eetre un nouvel espace libre dans l&rsquo;expression. Double-cliquez dans cet espace et \u00e9crivez \u00ab\u00a0Maisons\u00a0\u00bb. <\/li>\n<li><strong>d.<\/strong>  Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;expression.<\/li>\n<\/ul>\n<div><strong>Remarque :<\/strong> la valeur que vous saisissez dans l&rsquo;expression doit correspondre \u00e0 la valeur de la liste d\u00e9roulante.<\/div>\n<p>L&rsquo;\u00e9v\u00e9nement et la condition que vous venez de cr\u00e9er ne vous renverront \u00e0 l&rsquo;\u00e9cran Maisons que si vous s\u00e9lectionnez \u00ab\u00a0Maisons\u00a0\u00bb dans la liste d\u00e9roulante.<\/li>\n<li>Toujours dans la palette \u00c9v\u00e9nements, cliquez sur le lien de texte \u00ab\u00a0Autre\u00a0\u00bb ci-dessous. Cr\u00e9ez un autre \u00e9v\u00e9nement <strong>On Tap<\/strong> + <strong>Navigate To<\/strong> et cr\u00e9ez un lien vers l&rsquo;\u00e9cran Appartements. Comme il n&rsquo;y a que deux options que vous pouvez s\u00e9lectionner dans la liste d\u00e9roulante, vous n&rsquo;avez pas besoin de cr\u00e9er une condition pour cette action. <\/li>\n<\/ol>\n<p>Voici \u00e0 quoi devrait ressembler votre palette d&rsquo;\u00e9v\u00e9nements :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44025\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Conditional-navigation-events.png\" alt=\"La palette d'\u00e9v\u00e9nements affiche tous les \u00e9v\u00e9nements de cet exemple.\" width=\"1064\" height=\"647\"><br \/>\nCliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet. S\u00e9lectionnez une valeur dans la liste d\u00e9roulante et vous serez dirig\u00e9 vers l&rsquo;\u00e9cran correspondant. <\/p>\n<h2><a id=\"two-button-actions\"><\/a>Diff\u00e9rentes actions sur un bouton<\/h2>\n<p>Vous pouvez \u00e9galement utiliser des conditions pour attribuer diff\u00e9rentes actions \u00e0 un bouton qui se d\u00e9clenchera chaque fois que vous cliquerez dessus.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 10px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/different-actions-button-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" different-actions-button-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/different-actions-button-example.png\" alt=\"Exemple d'actions diff\u00e9rentes sur un bouton\">Exemple d&rsquo;actions diff\u00e9rentes sur un bouton<\/video><\/p>\n<h3>Design de l&rsquo;exemple<\/h3>\n<ol>\n<li>Placez trois rectangles et un bouton sur le canevas.<\/li>\n<li>S\u00e9lectionnez tous les rectangles et marquez-les comme \u00e9tant cach\u00e9s dans la palette Propri\u00e9t\u00e9s.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43925\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-multi-rectangles.png\" alt=\"Masquer les rectangles dans la palette des propri\u00e9t\u00e9s\" width=\"1027\" height=\"344\"><\/li>\n<\/ol>\n<h3>Cr\u00e9er les \u00e9v\u00e9nements<\/h3>\n<ol>\n<li>S\u00e9lectionnez le bouton sur le canevas, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<\/li>\n<li>Cr\u00e9ez un \u00e9v\u00e9nement <strong>On Click + Show<\/strong>, en s\u00e9lectionnant le premier rectangle \u00e0 afficher avec un effet de fondu. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43949\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Show-hidden-rectangle.png\" alt=\"Cr\u00e9ez un \u00e9v\u00e9nement On Click + Show, affichant le premier rectangle avec un effet de fondu.\" width=\"1324\" height=\"838\"><\/li>\n<li>Revenez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur le lien \u00ab\u00a0Ajouter une condition\u00a0\u00bb au-dessus de l&rsquo;\u00e9v\u00e9nement que vous venez de cr\u00e9er. Suivez les \u00e9tapes suivantes pour construire l&rsquo;expression :\n<ul class=\"hidden-bullet\">\n<li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43950\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Rectangle-not-visible-condition.png\" alt=\"Faites glisser le rectangle jusqu'\u00e0 l'espace libre de l'expression et s\u00e9lectionnez \"est visible\" dans la liste d\u00e9roulante. Placez une fonction Not devant cette expression\" width=\"818\" height=\"498\"><\/li>\n<li><strong>a.<\/strong>  Faites glisser le premier rectangle vers l&rsquo;espace libre de l&rsquo;expression.<\/li>\n<li><strong>b.<\/strong>  Vous verrez une liste d\u00e9roulante appara\u00eetre sous l&rsquo;\u00e9l\u00e9ment dans l&rsquo;expression. Cliquez dessus et s\u00e9lectionnez l&rsquo;option \u00ab\u00a0Est visible\u00a0\u00bb. <\/li>\n<li><strong>c.<\/strong> Faites glisser une fonction logique <strong>Not<\/strong> sur l&rsquo;expression. Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;expression.<\/li>\n<li>Cette condition v\u00e9rifie si le premier rectangle n&rsquo;est pas visible. Si ce n&rsquo;est pas le cas, le premier rectangle est affich\u00e9. <\/li>\n<\/ul>\n<\/li>\n<li>Cliquez sur le texte \u00ab\u00a0Else\u00a0\u00bb et cr\u00e9ez un autre \u00e9v\u00e9nement <strong>On Click<\/strong> + <strong>Show<\/strong>, en s\u00e9lectionnant le deuxi\u00e8me rectangle \u00e0 afficher avec un effet de fondu.<\/li>\n<li>Cliquez sur le texte \u00ab\u00a0Ajouter une autre condition\u00a0\u00bb au-dessus de l&rsquo;action que vous venez de cr\u00e9er et cr\u00e9ez cette condition :\n<ul class=\"hidden-bullet\">\n<li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44018\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Rectangle-visible-condition.png\" alt=\"Dans ce cas, le premier rectangle doit \u00eatre visible et le deuxi\u00e8me rectangle ne doit pas l'\u00eatre.\" width=\"1198\" height=\"709\"><\/li>\n<li><strong>a.<\/strong>  Faites glisser le premier rectangle vers l&rsquo;espace ouvert dans l&rsquo;expression et s\u00e9lectionnez \u00ab\u00a0Est visible\u00a0\u00bb dans la liste d\u00e9roulante.<\/li>\n<li><strong>b.<\/strong> Placez une fonction logique <strong>And (&amp;)<\/strong> \u00e0 c\u00f4t\u00e9 du rectangle dans l&rsquo;expression.<\/li>\n<li><strong>c.<\/strong>  Faites glisser le deuxi\u00e8me rectangle vers l&rsquo;espace ouvert dans l&rsquo;expression et s\u00e9lectionnez \u00ab\u00a0Est visible\u00a0\u00bb dans la liste d\u00e9roulante.<\/li>\n<li><strong>d.<\/strong> Placez une fonction logique <strong>Not<\/strong> \u00e0 gauche du deuxi\u00e8me rectangle et cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;expression.<\/li>\n<li>Cette condition v\u00e9rifie si le premier rectangle est visible et si le second rectangle n&rsquo;est pas visible sur le canevas. Si c&rsquo;est le cas, le deuxi\u00e8me rectangle est affich\u00e9. <\/li>\n<\/ul>\n<\/li>\n<li>Touchez \u00e0 nouveau le lien de texte \u00ab\u00a0Else\u00a0\u00bb et cr\u00e9ez un autre \u00e9v\u00e9nement <strong>On Click<\/strong> + <strong>Show<\/strong>, en s\u00e9lectionnant le troisi\u00e8me rectangle \u00e0 afficher avec un effet de fondu. Vous n&rsquo;aurez pas besoin d&rsquo;ajouter une condition \u00e0 cet \u00e9v\u00e9nement. <\/li>\n<\/ol>\n<p>Voici \u00e0 quoi devrait ressembler votre palette Events :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43953\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Events-palette-multi-event-button.png\" alt=\"Vue de la palette d'\u00e9v\u00e9nements avec tous les \u00e9v\u00e9nements\" width=\"882\" height=\"632\"><br \/>\nCliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet. Cliquez sur le bouton pour voir appara\u00eetre le premier rectangle. Cliquez \u00e0 nouveau sur le bouton pour voir appara\u00eetre le deuxi\u00e8me rectangle, et appuyez \u00e0 nouveau sur le bouton pour voir appara\u00eetre le dernier rectangle.  <\/p>\n<h2><a id=\"error-messages\"><\/a>Messages d&rsquo;erreur dans un formulaire de saisie<\/h2>\n<p>Vous allez maintenant apprendre \u00e0 construire des conditions qui v\u00e9rifient si tous les champs d&rsquo;un formulaire sont remplis et valid\u00e9s correctement. Si ce n&rsquo;est pas le cas, vous afficherez un message d&rsquo;erreur.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/error-message-preview.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" error-message-preview.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/error-message-preview.png\" alt=\"Aper\u00e7u du message d'erreur\">Aper\u00e7u du message d&rsquo;erreur<\/video><\/p>\n<h3>Design de l&rsquo;exemple<\/h3>\n<ol>\n<li>Faites glisser deux champs de saisie <kbd>F<\/kbd> et un bouton sur le canevas. Alignez-les pour qu&rsquo;ils correspondent \u00e0 l&rsquo;exemple. <\/li>\n<li>Double-cliquez sur chaque champ de texte pour ajouter une valeur de remplacement. Saisissez \u00ab\u00a0Email\u00a0\u00bb et \u00ab\u00a0Mot de passe\u00a0\u00bb. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43959\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder.png\" alt=\"Saisissez des valeurs de remplacement dans chaque champ de texte de la palette de propri\u00e9t\u00e9s.\" width=\"819\" height=\"450\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder.png 1640w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder-300x165.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder-768x421.png 768w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder-1024x562.png 1024w\" sizes=\"(max-width: 819px) 100vw, 819px\" \/><\/li>\n<li>Ajoutez deux \u00e9l\u00e9ments de texte, en en pla\u00e7ant un sous chaque champ de saisie. Intitulez-les \u00ab\u00a0Veuillez saisir un courriel valide\u00a0\u00bb et \u00ab\u00a0Veuillez saisir un mot de passe\u00a0\u00bb. Ce sont les messages d&rsquo;erreur que vous afficherez si le formulaire n&rsquo;est pas enti\u00e8rement rempli.<\/li>\n<li>S\u00e9lectionnez les deux messages d&rsquo;erreur et marquez-les comme \u00e9tant cach\u00e9s dans la palette des propri\u00e9t\u00e9s. Vous pouvez utiliser la <kbd>touche Shift<\/kbd> pour les s\u00e9lectionner plusieurs fois sur le canevas. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43962\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-error-messages.png\" alt=\"Masquer les messages d'erreur dans la palette des propri\u00e9t\u00e9s\" width=\"914\" height=\"381\"><\/li>\n<\/ol>\n<h3>Cr\u00e9er les \u00e9v\u00e9nements<\/h3>\n<ol>\n<li>S\u00e9lectionnez le bouton \u00ab\u00a0S&rsquo;inscrire\u00a0\u00bb, acc\u00e9dez \u00e0 la palette \u00ab\u00a0\u00c9v\u00e9nements\u00a0\u00bb et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb. Cr\u00e9ez un \u00e9v\u00e9nement \u00a0\u00bb <strong>On Click<\/strong> + <strong>Show\u00a0\u00bb<\/strong>, en s\u00e9lectionnant le message d&rsquo;erreur \u00ab\u00a0Please enter a valid email\u00a0\u00bb \u00e0 afficher.  Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44020\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Show-error-event.png\" alt=\"Choisissez le message d'erreur cach\u00e9 \u00e0 afficher\" width=\"1087\" height=\"686\"><\/li>\n<li>Cliquez sur le lien \u00ab\u00a0ajouter une condition\u00a0\u00bb au-dessus de l&rsquo;\u00e9v\u00e9nement que vous venez de cr\u00e9er. Suivez les \u00e9tapes suivantes pour construire l&rsquo;expression :\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Faites glisser une fonction logique d&rsquo;<strong>expression r\u00e9guli\u00e8re (Reg Exp)<\/strong> vers l&rsquo;espace libre de l&rsquo;expression.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43984\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Reg-Exp-Condition.png\" alt=\"Fonction logique d'expression r\u00e9guli\u00e8re ajout\u00e9e \u00e0 l'expression\" width=\"843\" height=\"469\"><\/li>\n<li><strong>b.<\/strong>  Vous verrez appara\u00eetre deux espaces libres. Faites glisser le champ de texte \u00ab\u00a0Email\u00a0\u00bb vers l&rsquo;espace libre de gauche. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43987\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Email-input-condition.png\" alt=\"Faites glisser le champ de saisie de l'e-mail vers l'espace libre \u00e0 gauche.\" width=\"843\" height=\"469\"><\/li>\n<li><strong>c.<\/strong> Cliquez sur l&rsquo;onglet <strong>Constantes<\/strong> et sur la section \u00ab\u00a0Expressions r\u00e9guli\u00e8res\u00a0\u00bb. Faites glisser la constante <strong>Email (@)<\/strong> dans l&rsquo;espace libre \u00e0 droite. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43989\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Email-constant.png\" alt=\"Email constant dans l'espace ouvert \u00e0 droite\" width=\"1158\" height=\"764\"><\/li>\n<li><strong>d.<\/strong> Cliquez \u00e0 nouveau sur l&rsquo;onglet <strong>Fonctions<\/strong>. Faites glisser une fonction logique <strong>Not<\/strong> devant l&rsquo;expression.  Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;expression.<\/li>\n<li>Cette condition v\u00e9rifie si la valeur que vous avez saisie dans le champ de texte correspond ou non \u00e0 la structure d&rsquo;une adresse \u00e9lectronique. Si ce n&rsquo;est pas le cas, un message d&rsquo;erreur s&rsquo;affiche. <\/li>\n<\/ul>\n<\/li>\n<li>Cliquez sur le texte \u00ab\u00a0Else\u00a0\u00bb sous l&rsquo;\u00e9v\u00e9nement que vous venez de cr\u00e9er et cr\u00e9ez un \u00e9v\u00e9nement <strong>On Click<\/strong> + <strong>Hide<\/strong>, en s\u00e9lectionnant le message d&rsquo;erreur \u00ab\u00a0Please enter a valid email\u00a0\u00bb \u00e0 masquer.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43977\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-else-event.png\" alt=\"Cliquez sur le texte \"Autre\" sous les \u00e9v\u00e9nements que vous avez cr\u00e9\u00e9s.\" width=\"1345\" height=\"760\"><\/li>\n<li>Cliquez sur le bouton \u00ab\u00a0+\u00a0\u00bb en haut de la palette \u00c9v\u00e9nements pour cr\u00e9er une nouvelle interaction. Cr\u00e9ez un \u00e9v\u00e9nement <strong>On Click<\/strong> + <strong>Show<\/strong>, en s\u00e9lectionnant le message d&rsquo;erreur \u00ab\u00a0Please enter a password\u00a0\u00bb \u00e0 afficher. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43980\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-new-interaction.png\" alt=\"Cliquez sur le bouton + pour cr\u00e9er une nouvelle interaction\" width=\"593\" height=\"236\"><\/li>\n<li>Cliquez sur le lien \u00ab\u00a0Ajouter une condition\u00a0\u00bb au-dessus de l&rsquo;\u00e9v\u00e9nement que vous venez de cr\u00e9er, ce qui ouvrira le g\u00e9n\u00e9rateur d&rsquo;expressions conditionnelles. Suivez les \u00e9tapes suivantes pour construire l&rsquo;expression :\n<ul class=\"hidden-bullet\">\n<li>\n<div class=\"embed-container\" style=\"padding-bottom: 66%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/743407649\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li><strong>a.<\/strong>  Dans l&rsquo;aper\u00e7u du canevas, faites glisser et d\u00e9posez le champ de texte de saisie \u00ab\u00a0Mot de passe\u00a0\u00bb dans l&rsquo;espace libre de l&rsquo;expression.<\/li>\n<li><strong>b.<\/strong> Placez une fonction logique <strong>\u00e9gale (=)<\/strong> \u00e0 c\u00f4t\u00e9 du champ de texte de saisie.<\/li>\n<li><strong>c.<\/strong>  Vous verrez appara\u00eetre un nouvel espace ouvert. Double-cliquez dessus, mais laissez-le vide.  Cliquez sur \u00ab\u00a0OK\u00a0\u00bb pour terminer la construction de l&rsquo;expression.<\/li>\n<li>Cette condition v\u00e9rifie si aucune valeur n&rsquo;a \u00e9t\u00e9 saisie dans le champ de texte. Si c&rsquo;est le cas, vous verrez appara\u00eetre le message d&rsquo;erreur que vous avez cr\u00e9\u00e9. <\/li>\n<\/ul>\n<\/li>\n<li>Appuyez sur le lien \u00ab\u00a0Autre\u00a0\u00bb situ\u00e9 sous les \u00e9v\u00e9nements que vous venez de cr\u00e9er et cr\u00e9ez un \u00e9v\u00e9nement <strong>On Click<\/strong> + <strong>Hide<\/strong>, en s\u00e9lectionnant le message d&rsquo;erreur \u00ab\u00a0Veuillez saisir un mot de passe\u00a0\u00bb \u00e0 masquer. Le message d&rsquo;erreur sera masqu\u00e9 si vous avez saisi une valeur dans le champ de saisie \u00ab\u00a0Mot de passe\u00a0\u00bb. <\/li>\n<\/ol>\n<p>Voici \u00e0 quoi devrait ressembler votre palette d&rsquo;\u00e9v\u00e9nements :<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43955\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Error-messages-events-palette.png\" alt=\"Vue de la palette d'\u00e9v\u00e9nements avec tous les \u00e9v\u00e9nements et conditions\" width=\"903\" height=\"746\"><br \/>\nCliquez sur le bouton \u00ab\u00a0Play\u00a0\u00bb pour simuler votre projet. Remplissez l&rsquo;un des champs de texte, mais laissez l&rsquo;autre vide. Cliquez sur le bouton \u00ab\u00a0S&rsquo;inscrire\u00a0\u00bb et vous verrez appara\u00eetre un message d&rsquo;erreur. Saisissez une valeur dans le champ de saisie et cliquez \u00e0 nouveau sur le bouton pour que les messages d&rsquo;erreur disparaissent.   <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vous pouvez ajouter des conditions dans vos projets pour d\u00e9finir quand un \u00e9v\u00e9nement doit ou ne doit pas se d\u00e9clencher. Vous pouvez les utiliser pour cr\u00e9er&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8416,8420],"tags":[],"class_list":["post-124622","post","type-post","status-publish","format-standard","hentry","category-formation","category-interactions-web-et-mobiles"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124622"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124622"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124622\/revisions"}],"predecessor-version":[{"id":126219,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124622\/revisions\/126219"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}