{"id":6192,"date":"2025-09-29T11:55:57","date_gmt":"2025-09-29T11:55:57","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ajouter-verifications-formulaire-react\/"},"modified":"2025-09-29T11:56:03","modified_gmt":"2025-09-29T11:56:03","slug":"ajouter-verifications-formulaire-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ajouter-verifications-formulaire-react\/","title":{"rendered":"16.5 Ajouter des V\u00e9rifications dans un Formulaire en React"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>V\u00e9rifications Formulaire React<\/strong> est une \u00e9tape cruciale pour garantir que vos applications web recueillent des informations pr\u00e9cises et r\u00e9duisent les erreurs utilisateurs. En configurant des v\u00e9rifications efficaces, vous pouvez am\u00e9liorer l&rsquo;interaction utilisateur tout en assurant l&rsquo;int\u00e9grit\u00e9 des donn\u00e9es collect\u00e9es. D\u00e9couvrez comment impl\u00e9menter des v\u00e9rifications dans React \u00e0 l\u2019aide d\u2019exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Ajout de V\u00e9rifications dans les Formulaires React<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706142165?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Dans le d\u00e9veloppement d&rsquo;applications React, la gestion des formulaires est une comp\u00e9tence essentielle. Ajouter des v\u00e9rifications permet non seulement d&rsquo;am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur mais \u00e9galement d&rsquo;assurer la validit\u00e9 des donn\u00e9es collect\u00e9es. Ce tutoriel vous guidera \u00e0 travers les concepts fondamentaux et les techniques avanc\u00e9es pour int\u00e9grer des v\u00e9rifications dans vos formulaires, en utilisant React Hooks et des biblioth\u00e8ques tierces.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Formulaire de Base en React<\/h3>\n\n\n\n<p>Commen\u00e7ons par cr\u00e9er un formulaire basique. Nous utiliserons le hook <code>useState<\/code> pour g\u00e9rer l&rsquo;\u00e9tat de notre formulaire :<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>import React, { useState } from 'react';\n\nfunction BasicForm() {\n  const [formData, setFormData] = useState({ username: '', email: '' });\n\n  const handleChange = (event) => {\n    const { name, value } = event.target;\n    setFormData({ ...formData, [name]: value });\n  };\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    \/\/ Logique de soumission\n    console.log('Donn\u00e9es du formulaire:', formData);\n  };\n\n  return (\n    &lt;form onSubmit={handleSubmit}>\n      &lt;input\n        type=\"text\"\n        name=\"username\"\n        value={formData.username}\n        onChange={handleChange}\n        placeholder=\"Nom d'utilisateur\"\n      \/>\n      &lt;input\n        type=\"email\"\n        name=\"email\"\n        value={formData.email}\n        onChange={handleChange}\n        placeholder=\"Email\"\n      \/>\n      &lt;button type=\"submit\">Soumettre&lt;\/button>\n    &lt;\/form>\n  );\n}\n\nexport default BasicForm;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Validation de Formulaire avec React Hooks<\/h3>\n\n\n\n<p>Le hook <code>useState<\/code> nous permet de d\u00e9terminer si les donn\u00e9es d&rsquo;entr\u00e9es sont valides. Ajoutons une fonction de validation basique :<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>const validate = (name, value) => {\n  switch (name) {\n    case 'username':\n      return value.length >= 3 ? '' : 'Le nom d\u2019utilisateur doit comporter au moins 3 caract\u00e8res.';\n    case 'email':\n      const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n      return emailRegex.test(value) ? '' : 'L\u2019adresse e-mail n\u2019est pas valide.';\n    default:\n      return '';\n  }\n};\n<\/code><\/pre>\n\n\n\n<p>Nous devons maintenant incorporer cette validation dans notre gestion des changements de champ :<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>const [errors, setErrors] = useState({});\n\nconst handleChange = (event) => {\n  const { name, value } = event.target;\n  const error = validate(name, value);\n  setErrors({ ...errors, [name]: error });\n  setFormData({ ...formData, [name]: value });\n};\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Afficher les Messages d&rsquo;Erreur<\/h3>\n\n\n\n<p>Pour une meilleure exp\u00e9rience utilisateur, les messages d&rsquo;erreur doivent \u00eatre affich\u00e9s imm\u00e9diatement:<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>&lt;div>\n  &lt;input\n    type=\"text\"\n    name=\"username\"\n    value={formData.username}\n    onChange={handleChange}\n    placeholder=\"Nom d'utilisateur\"\n  \/>\n  {errors.username && &lt;span className=\"error\">{errors.username}&lt;\/span>}\n&lt;\/div>\n\n&lt;div>\n  &lt;input\n    type=\"email\"\n    name=\"email\"\n    value={formData.email}\n    onChange={handleChange}\n    placeholder=\"Email\"\n  \/>\n  {errors.email && &lt;span className=\"error\">{errors.email}&lt;\/span>}\n&lt;\/div>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de Biblioth\u00e8ques pour les V\u00e9rifications<\/h3>\n\n\n\n<p>Pour des fonctionnalit\u00e9s plus avanc\u00e9es, vous pouvez utiliser des biblioth\u00e8ques d\u00e9di\u00e9es such as <code>formik<\/code> et <code>yup<\/code>. Formik facilite la gestion des donn\u00e9es de formulaire, tandis que Yup valide les champs.<\/p>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>import { useFormik } from 'formik';\nimport * as Yup from 'yup';\n\nconst formik = useFormik({\n  initialValues: { username: '', email: '' },\n  validationSchema: Yup.object({\n    username: Yup.string().min(3, 'Le nom d\u2019utilisateur doit comporter au moins 3 caract\u00e8res.').required('Requis'),\n    email: Yup.string().email('L\u2019adresse e-mail n\u2019est pas valide.').required('Requis'),\n  }),\n  onSubmit: values => {\n    console.log('Donn\u00e9es du formulaire:', values);\n  }\n});\n\nreturn (\n  &lt;form onSubmit={formik.handleSubmit}>\n    &lt;input\n      type=\"text\"\n      name=\"username\"\n      value={formik.values.username}\n      onChange={formik.handleChange}\n    \/>\n    {formik.errors.username && &lt;span className=\"error\">{formik.errors.username}&lt;\/span>}\n    &lt;input\n      type=\"email\"\n      name=\"email\"\n      value={formik.values.email}\n      onChange={formik.handleChange}\n    \/>\n    {formik.errors.email && &lt;span className=\"error\">{formik.errors.email}&lt;\/span>}\n    &lt;button type=\"submit\">Soumettre&lt;\/button>\n  &lt;\/form>\n);\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur les V\u00e9rifications Formulaire React<\/h2>\n\n\n\n<p>En incorporant des v\u00e9rifications dans vos formulaires React, vous cr\u00e9ez une exp\u00e9rience utilisateur plus robuste et agr\u00e9able. Que vous choisissiez d&rsquo;impl\u00e9menter des v\u00e9rifications manuelles ou d&rsquo;utiliser des biblioth\u00e8ques telles que <a href=\"https:\/\/formik.org\/\" target=\"_blank\" rel=\"dofollow noopener\">Formik<\/a> et <a href=\"https:\/\/github.com\/jquense\/yup\" target=\"_blank\" rel=\"dofollow noopener\">Yup<\/a>, le r\u00e9sultat est un formulaire React plus fiable et interactif. Pour approfondir vos connaissances, explorez notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">guide sur les avantages de React<\/a> ou apprenez \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">cr\u00e9er votre premi\u00e8re application React<\/a>. Si vous \u00eates curieux de conna\u00eetre les <a href=\"https:\/\/wikiform.fr\/codespace\/differences-single-page-multi-page-react\" target=\"_blank\" rel=\"noopener\">diff\u00e9rences entre les applications \u00e0 page unique et multipages<\/a>, consultez notre article d\u00e9taill\u00e9. Bonne pratique du code !<\/p>\n\n\n\n<p>Pour ceux qui souhaitent approfondir leurs connaissances en React, vous pouvez \u00e9galement d\u00e9couvrir nos articles sur les <a href=\"https:\/\/wikiform.fr\/codespace\/meilleurs-logiciels-developper-react\" target=\"_blank\" rel=\"noopener\">meilleurs logiciels pour d\u00e9velopper avec React<\/a> et les <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener\">extensions indispensables<\/a> pour optimiser votre d\u00e9veloppement.<\/p>\n\n\n\n<p>N\u2019oubliez pas que dans React, le choix entre les <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" target=\"_blank\" rel=\"noopener\">composants par classe et fonction<\/a> peut \u00e9galement influencer la mani\u00e8re dont vous allez g\u00e9rer vos formulaires et validations.<\/p>\n\n\n<!-- Promotion Image -->\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\">\n  <img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Formation Learnify React et Redux\" title=\"\">\n<\/a>\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html V\u00e9rifications Formulaire React est une \u00e9tape cruciale pour garantir que vos applications web recueillent des informations pr\u00e9cises et r\u00e9duisent les erreurs utilisateurs. En configurant&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3165,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-6192","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=6192"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6192\/revisions"}],"predecessor-version":[{"id":6193,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/6192\/revisions\/6193"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3165"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=6192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=6192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=6192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}