{"id":124639,"date":"2022-11-16T18:10:11","date_gmt":"2022-11-16T17:10:11","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-forms-with-mandatory-selection-fields\/"},"modified":"2025-01-29T17:43:16","modified_gmt":"2025-01-29T16:43:16","slug":"how-to-create-forms-with-mandatory-selection-fields","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/how-to-prototype-forms-with-mandatory-fields","title":{"rendered":"Comment prototyper des formulaires avec des champs obligatoires"},"content":{"rendered":"<p>Cet article vous apprend \u00e0 prototyper des formulaires avec des champs obligatoires.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73157099\/index.html\" width=\"820px\" height=\"430px\" frameborder=\"0\"><\/iframe><\/p>\n<p>Voici comment le construire :<\/p>\n<h3>Voir<\/h3>\n<ul>\n<li>\u00c0 partir des \u00ab\u00a0champs de saisie interactifs\u00a0\u00bb, placez trois \u00ab\u00a0champs de texte de saisie\u00a0\u00bb sur le canevas.<\/li>\n<li>S\u00e9lectionnez \u00ab\u00a0Texte\u00a0\u00bb et placez-en un \u00e0 c\u00f4t\u00e9 de chaque \u00ab\u00a0champ de saisie\u00a0\u00bb et \u00e9crivez \u00ab\u00a0Nom\u00a0\u00bb, \u00ab\u00a0Num\u00e9ro de t\u00e9l\u00e9phone\u00a0\u00bb et \u00ab\u00a0Adresse \u00e9lectronique\u00a0\u00bb.<\/li>\n<li>Placez un nouveau \u00ab\u00a0Texte\u00a0\u00bb \u00e0 c\u00f4t\u00e9 du premier \u00ab\u00a0Champ de texte de saisie\u00a0\u00bb et \u00e9crivez votre message d&rsquo;erreur ; cette erreur v\u00e9rifiera si le premier champ de saisie est vide ; avec ce texte s\u00e9lectionn\u00e9, allez dans la palette Propri\u00e9t\u00e9s et cliquez sur l&rsquo;ic\u00f4ne \u00ab\u00a0Cach\u00e9 dans la simulation\u00a0\u00bb.<\/li>\n<li>Placez un nouveau \u00ab\u00a0Texte\u00a0\u00bb sous votre dernier \u00ab\u00a0Champ de texte d&rsquo;entr\u00e9e\u00a0\u00bb pour la validation de l&rsquo;adresse e-mail, allez dans la palette Propri\u00e9t\u00e9s et cliquez sur l&rsquo;ic\u00f4ne \u00ab\u00a0Cach\u00e9 dans la simulation\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/forms-mandatory-fields-1.png\" alt=\"ic\u00f4ne de l'\u0153il3\" width=\"301\" height=\"438\"><\/li>\n<li>Placez un \u00ab\u00a0bouton\u00a0\u00bb ci-dessous pour terminer votre formulaire.<\/li>\n<\/ul>\n<h3>Ev\u00e9nements<\/h3>\n<p><span data-preserver-spaces=\"true\">Une fois le \u00ab\u00a0bouton\u00a0\u00bb s\u00e9lectionn\u00e9, retournez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir l&rsquo;action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Afficher l&rsquo;\u00e9l\u00e9ment cach\u00e9\u00a0\u00bb et choisissez le texte cach\u00e9 de validation du nom.  <\/span>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-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/forms-mandatory-fields-3.png\" alt=\"ic\u00f4ne de l'\u0153il3\" width=\"301\" height=\"438\"><\/li>\n<\/ol>\n<p>Allez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter une condition\u00a0\u00bb pour ouvrir le constructeur d&rsquo;expressions.<br \/>\nGlissez-d\u00e9posez le nom \u00ab\u00a0Champ de texte d&rsquo;entr\u00e9e\u00a0\u00bb dans l&rsquo;espace libre de l&rsquo;expression ; ensuite, glissez une fonction logique \u00ab\u00a0\u00c9gal\u00a0\u00bb (=) et laissez le champ suivant vide. Si le champ \u00ab\u00a0Nom\u00a0\u00bb est vide, le message d&rsquo;erreur s&rsquo;affiche. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la construction de l&rsquo;expression.  <\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 57%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/762626517\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Retournez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Autre\u00a0\u00bb ; la bo\u00eete de dialogue des \u00e9v\u00e9nements s&rsquo;ouvre.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Masquer l&rsquo;\u00e9l\u00e9ment\u00a0\u00bb et cliquez sur le message d&rsquo;erreur.  <\/span>Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement (si le champ \u00ab\u00a0Nom\u00a0\u00bb est complet, cliquez sur le bouton \u00ab\u00a0Soumettre\u00a0\u00bb pour faire dispara\u00eetre le message d&rsquo;erreur).<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" style=\"font-size: inherit;\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/forms-mandatory-fields-4.png\" alt=\"ic\u00f4ne de l'\u0153il3\" width=\"301\" height=\"438\"><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Le \u00ab\u00a0bouton\u00a0\u00bb \u00e9tant s\u00e9lectionn\u00e9, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter une interaction\u00a0\u00bb.<\/span><\/p>\n<ol>\n<li>Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir l&rsquo;action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Afficher l&rsquo;\u00e9l\u00e9ment cach\u00e9\u00a0\u00bb et s\u00e9lectionnez le texte cach\u00e9 de la validation du courrier \u00e9lectronique.  <\/span>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-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/forms-mandatory-fields-5.png\" alt=\"ic\u00f4ne de l'\u0153il3\" width=\"301\" height=\"438\"><\/li>\n<\/ol>\n<p>Allez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter une condition\u00a0\u00bb pour ouvrir le constructeur d&rsquo;expressions.<br \/>\nGlissez-d\u00e9posez une fonction \u00ab\u00a0Not\u00a0\u00bb, puis glissez la fonction logique \u00ab\u00a0RegExp\u00a0\u00bb, et dans le champ suivant, tirez la validation de l&#8217;email \u00ab\u00a0Champ de texte d&rsquo;entr\u00e9e\u00a0\u00bb, enfin, \u00e0 partir de l&rsquo;onglet \u00ab\u00a0Constante\u00a0\u00bb, l&rsquo;expression r\u00e9guli\u00e8re \u00ab\u00a0@\u00a0\u00bb. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la construction de l&rsquo;expression. <\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 57%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/762629046\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Retournez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Autre\u00a0\u00bb ; la bo\u00eete de dialogue des \u00e9v\u00e9nements s&rsquo;ouvre.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Click\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Masquer l&rsquo;\u00e9l\u00e9ment\u00a0\u00bb et cliquez sur le message d&rsquo;erreur de validation du courrier \u00e9lectronique.  <\/span>Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement (si le champ \u00ab\u00a0Email\u00a0\u00bb est complet, cliquez sur le bouton \u00ab\u00a0Submit\u00a0\u00bb pour faire dispara\u00eetre le message d&rsquo;erreur).<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/forms-mandatory-fields-6.png\" alt=\"ic\u00f4ne de l'\u0153il3\" width=\"301\" height=\"438\"><\/li>\n<\/ol>\n<p>Simulez votre prototype.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cet article vous apprend \u00e0 prototyper des formulaires avec des champs obligatoires. Voici comment le construire : Voir \u00c0 partir des \u00ab\u00a0champs de saisie interactifs\u00a0\u00bb, placez&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8426,8428],"tags":[],"class_list":["post-124639","post","type-post","status-publish","format-standard","hentry","category-comment-faire","category-formulaires-et-donnees-fr"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124639"}],"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\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124639"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124639\/revisions"}],"predecessor-version":[{"id":124977,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124639\/revisions\/124977"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}