Comment valider des formulaires avec Bootstrap 5

AmorcerSam Norton • 10 mars 2021 • 7 minutes de lecture

La validation des formulaires est l’un des facteurs les plus critiques lorsqu’il s’agit de collecter des informations et de prévenir l’utilisation abusive des formulaires Web.

En plus de vous éviter d’éventuelles cyberattaques, la validation de formulaire protège également votre site Web contre les mauvaises entrées de formulaire. Lors de la soumission du formulaire avec validation, l’utilisateur aura la possibilité de modifier les champs de données contenant des données non valides avant de les soumettre.

En général, vous avez besoin de la validation du formulaire comme mesure de sécurité, car les données de formulaire invalides sont l’une des principales sources de vulnérabilités de sécurité du site Web.

Les formulaires sont entièrement pris en charge dans Bootstrap 5. La plupart des composants sont principalement utilisés pour donner aux formulaires un aspect propre et réactif, ce qui peut être utilisé avec n’importe quelle taille d’écran. Alors que les formulaires Bootstrap 5 reçoivent automatiquement le formatage correct via des classes données, en ce qui concerne validation de formulaire vous devez configurer des classes supplémentaires et du JavaScript afin de profiter de son support de validation contemporain dès la sortie de la boîte.

Dans cet article, je vais vous montrer comment utiliser la validation de formulaire Bootstrap 5 pour présenter des commentaires exploitables décents sur les champs de données de formulaire tels que la zone de texte, la sélection, la case à cocher, le bouton radio ainsi que d’autres champs de formulaire bootstrap disponibles lors de la soumission du formulaire. Nous utiliserons JavaScript pour désactiver les soumissions de formulaires si des champs invalides sont entrés.

Noter: HTML 5 a ses propres moyens de validation, mais il a des limites, en particulier en ce qui concerne la prise en charge des navigateurs. L’une des limitations notables est le manque de personnalisation en ce qui concerne la gestion des messages d’erreur dont vous aurez besoin pour trouver un moyen d’être triés. Heureusement, Bootstrap 5 a à portée de main des styles de validation de formulaire contemporains.

Comment ça fonctionne

Bootstrap 5 est livré avec des styles de validation très faciles à utiliser mais puissants pour les champs de saisie. Ces styles de validation sont utilisés pour présenter certains styles de formulaire et messages, à la fois des erreurs et des états de réussite pour les champs de formulaire, et peuvent être déclenchés lorsque vous soumettez le formulaire réel.

Éléments HTML pris en charge

Les styles de validation Bootstrap 5 peuvent être utilisés sur les éléments HTML suivants, y compris jusqu’à un .form-control classe dans les groupes d’entrée.

• </strong></li> </ul> <p>Pour l’élément d’entrée, vous pouvez utiliser les styles de validation Bootstrap 5 sur les balises couramment utilisées telles que la zone de texte, le bouton radio, la case à cocher et la balise d’élément de fichier. <p>La validation du formulaire Bootstrap 5 a essentiellement deux états: <strong>Erreur</strong> et <strong>Succès</strong>. Celles-ci sont représentées par les classes sémantiques suivantes. <ul> <li><strong>.is-invalid: Erreur</strong></li> <li><strong>.is-valid: succès</strong></li> </ul> <p>Jetons un coup d’œil au code pour rendre ces deux états de validation: <pre class="brush: xml; title: ; notranslate" title=""> <div class="col-md-4"> <label for="validationSuccess" class="form-label text-success">Input with success</label> <input type="text" class="form-control is-valid" id="validationSuccess" required> </div> <div class="col-md-4"> <label for="validationError" class="form-label text-danger">Input with error</label> <input type="text" class="form-control is-invalid" id="validationError" required> </div> </pre> <p>Le balisage que vous voyez ci-dessus est très similaire aux entrées habituelles avec l’ajout de quelques classes CSS pour appliquer l’apparence et la convivialité de l’état. <p>Passons en revue le code dont vous devez être conscient: <ul> <li>La première entrée est l’état de réussite. Le champ de saisie doit avoir une classe appelée <strong>.est valable </strong>ajouté à lui.</li> <li>La deuxième entrée est l’état d’erreur. Le champ de saisie doit avoir une classe appelée <strong>.est invalide</strong> ajouté à lui.</li> <li>Notez que chaque entrée a une icône sur le bord droit de celle-ci. Ces icônes sont automatiquement ajoutées lorsque vous incluez les fichiers CSS d’amorçage requis.</li> <li>Chaque <strong><label></strong> la balise a une classe <strong>.text-success </strong>et <strong>.text-danger</strong> ajouté à lui. Celles-ci ne sont pas requises dans la validation du formulaire, mais elles sont uniquement à des fins de démonstration pour colorer l’étiquette afin qu’elle corresponde à la couleur de l’état.</li> </ul> <p>Jetons un coup d’œil à ce à quoi ces entrées de validation devraient ressembler dans le navigateur: <figure id="attachment_620839" class="alignleft"><img loading="lazy" class="size-full wp-image-620839" src="https://designmodo.com/wp-content/uploads/2021/03/image1.png" alt="Comment valider des formulaires avec Bootstrap 5" width="531" height="229" srcset="https://designmodo.com/wp-content/uploads/2021/03/image1.png 531w, https://designmodo.com/wp-content/uploads/2021/03/image1-5x3.png 5w, https://designmodo.com/wp-content/uploads/2021/03/image1-300x129.png 300w" sizes="(max-width: 531px) 100vw, 531px"/></figure> <p>Ensuite, voyons comment les messages de validation de formulaire fonctionnent avec la validation de formulaire Bootstrap 5 à un niveau très basique. La validation de formulaire Bootstrap 5 fournit également deux états pour les messages de validation de formulaire similaires à la validation d’entrée ci-dessus: <strong>Erreur</strong> et <strong>Succès</strong>. <p>Celles-ci sont représentées par les classes sémantiques suivantes. <ul> <li><strong>.invalid-feedback: Erreur</strong></li> <li><strong>.valid-feedback: succès</strong></li> </ul> <p>Jetons un coup d’œil au code pour rendre ces deux états de messages de validation: <pre class="brush: xml; title: ; notranslate" title=""> <div class="col-md-4"> <label for="validationSuccess" class="form-label text-success">Input with success</label> <input type="text" class="form-control is-valid" id="validationSuccess" required> <div class="valid-feedback"> This is a success state form validation message! </div> </div> <div class="col-md-4"> <label for="validationError" class="form-label text-danger">Input with error</label> <input type="text" class="form-control is-invalid" id="validationError" required> <div class="invalid-feedback"> This is an error state form validation message! </div> </pre> <p>Passons en revue le code dont vous devez être conscient: <ul> <li>Le div avec une classe <strong>.valid-feedback</strong> est le message de validation du formulaire <strong>Succès.</strong> </li> <li>Le div avec une classe.<strong>rétroaction invalide</strong> est le message de validation du formulaire <strong>Erreur.</strong> </li> <li>Chaque classe indiquée ci-dessus doit être utilisée ensemble sous le champ de saisie, puis bootstrap à l’aide de JavaScript déterminera celle à afficher en fonction de l’entrée de l’utilisateur lors de la soumission du formulaire. Plus d’informations à ce sujet plus tard.</li> </ul> <p>Jetons un coup d’œil à ce à quoi ces entrées de validation devraient ressembler dans le navigateur: <figure id="attachment_620840" class="alignleft"><img loading="lazy" class="size-full wp-image-620840" src="https://designmodo.com/wp-content/uploads/2021/03/image4.png" alt="Validation du formulaire Bootstrap" width="532" height="297" srcset="https://designmodo.com/wp-content/uploads/2021/03/image4.png 532w, https://designmodo.com/wp-content/uploads/2021/03/image4-5x3.png 5w, https://designmodo.com/wp-content/uploads/2021/03/image4-522x292.png 522w, https://designmodo.com/wp-content/uploads/2021/03/image4-300x167.png 300w" sizes="(max-width: 532px) 100vw, 532px"/></figure> <p>Comme vu ci-dessus, les entrées et les messages de validation de formulaire sont colorés pour correspondre à leur état. De plus, notez que nous avons utilisé <strong>.est valable</strong> et <strong>.est invalide</strong> pour correspondre à l’état pour une validation particulière. <p>Cependant, avec Bootstrap et l’utilisation de JavaScript lors de la soumission du formulaire, vous n’avez pas besoin de mettre impérativement ces deux classes sur chaque champ de données. Bootstrap le gérera pour vous en conséquence. La validation du formulaire Bootstrap est appliquée à l’aide des deux pseudo-classes de CSS, <strong>:valide</strong> et<strong>:invalide</strong>. Bootstrap a examiné les styles de ces classes qui sont généralement appliqués avec l’utilisation de <strong>.a été validé</strong> classe dans le <strong> <form></strong> étiqueter. Le <strong>.est valable </strong>et <strong>.est invalide</strong> les classes peuvent toujours être utilisées à la place des pseudo-classes pour la validation côté serveur. Veuillez noter que si vous utilisez ces classes lors de la validation côté serveur, vous n’avez pas besoin d’ajouter <strong>.a été validé</strong> classer. <h3><span id="validation-style-using-tooltips">Style de validation à l’aide des info-bulles</span><br /> </h3> <p>Bootstrap est également livré avec des styles d’info-bulles pour ses styles de validation contemporains. L’info-bulle ou info-bulle est un élément d’interface utilisateur courant où, en survolant un élément, une boîte contextuelle affiche les informations requises pour cet élément spécifique, mais dans ce cas, il s’agirait du message de validation. <p>Pour que la fonction de validation des info-bulles fonctionne, vous devez utiliser <strong>.valid-tooltip</strong> ou <strong>.invalid-tooltip</strong> classe pour correspondre à l’état d’un style de validation particulier et d’un message de validation de formulaire au lieu d’utiliser <strong>.valid-feedback</strong> et <strong>.invalid-feedback</strong>. De plus, vous devez avoir un élément parent avec <strong>position: relative</strong> style pour le positionnement des info-bulles. <p>Le code ci-dessous est identique au code ci-dessus, mais cette fois en utilisant une info-bulle car il s’agit d’un style de validation contemporain. <pre class="brush: xml; title: ; notranslate" title=""> <div class="col-md-4 position-relative"> <label for="validationSuccess" class="form-label text-success">Input with success</label> <input type="text" class="form-control" value="Samuel Norton" required> <div class="valid-tooltip"> This is a success state form validation message! </div> </div> <div class="col-md-4 position-relative"> <label for="validationError" class="form-label text-danger">Input with error</label> <input type="text" class="form-control" id="validationError" required> <div class="invalid-tooltip"> This is an error state form validation message! </div> </div> </pre> <p>Jetons un coup d’œil à ce à quoi ces entrées de validation devraient ressembler dans le navigateur: <figure id="attachment_620842" class="alignleft"><img loading="lazy" class="size-full wp-image-620842" src="https://designmodo.com/wp-content/uploads/2021/03/image3.png" alt="Validation JavaScript" width="539" height="306" srcset="https://designmodo.com/wp-content/uploads/2021/03/image3.png 539w, https://designmodo.com/wp-content/uploads/2021/03/image3-5x3.png 5w, https://designmodo.com/wp-content/uploads/2021/03/image3-300x170.png 300w" sizes="(max-width: 539px) 100vw, 539px"/></figure> <h3><span id="using-javascript">Utilisation de JavaScript</span><br /> </h3> <p>Voyons maintenant comment JavaScript peut aider nos styles de validation bootstrap à empêcher toute soumission invalide de la part des utilisateurs. <p>Tout d’abord, jetez un œil au balisage suivant: <pre class="brush: xml; title: ; notranslate" title=""> <form class="row g-3 requires-validation" novalidate> <div class="col-md-12"> <label for="username" class="form-label">Username:</label> <input type="text" class="form-control" id="username" required> <div class="valid-feedback"> Username looks good! </div> <div class="invalid-feedback"> Username is required! </div> </div> <div class="col-md-12"> <label for="password" class="form-label">Password:</label> <input type="text" class="form-control" id="password" required> <div class="valid-feedback"> Password looks good! </div> <div class="invalid-feedback"> Password is required! </div> </div> <div class="col-12"> <button class="btn btn-primary" type="submit">Login</button> </div> </form> </pre> <p>Regardons de plus près le balisage ci-dessus: <ul> <li>La balise form a un <strong>novalidate</strong> attribut booléen. Cela empêche les info-bulles de commentaires par défaut du navigateur sans l’occlusion de l’accès aux API de validation de formulaire dans JavaScript.</li> <li>Nous n’avons pas inclus le <strong>.est valable</strong> et <strong>.est invalide</strong> classes sur chaque champ de données. Sangles de botte <strong>:invalide</strong> et <strong>:valide</strong> styles l’appliquera aux contrôles de formulaire avec l’utilisation de JavaScript.</li> <li>Nous avons ajouté un <strong>.requires-validation</strong> classe à l’intérieur de la balise form. Ce n’est pas une classe sémantique de bootstrap. Vous pouvez le renommer avec le nom de classe que vous préférez. Le but de cette classe est d’aider JavaScript à récupérer tous les éléments du formulaire pour appliquer des styles de validation d’amorçage personnalisés en conséquence (plus d’informations à ce sujet plus tard).</li> <li>Sur chaque champ de données ou entrées, nous avons ajouté le <strong>obligatoire</strong> attribut à la fin. Cela indique simplement qu’un champ de données particulier doit être rempli avant de soumettre le formulaire.</li> <li>Encore une fois, nous utilisons <strong>.valid-feedback</strong> et <strong>.invalid-feedback</strong> au bas de chaque champ de données. Le div avec une classe <strong>.valid-feedback</strong> est le message de validation du formulaire <strong>Succès</strong> Où, le div avec une classe <strong>.invalid-feedback</strong> est le message de validation du formulaire <strong>Erreur</strong> Etat.</li> </ul> <p>Ensuite, ajoutons le code JavaScript pour désactiver les soumissions de formulaire s’il y a des champs non valides lorsque l’utilisateur soumet le formulaire: <pre class="brush: jscript; title: ; notranslate" title=""> <script> (function () { 'use strict' const forms = document.querySelectorAll('.requires-validation') Array.from(forms) .forEach(function (form) { form.addEventListener('submit', function (event) { if (!form.checkValidity()) { event.preventDefault() event.stopPropagation() } form.classList.add('was-validated') }, false) }) })() </script> </pre> <p>Le code JavaScript ci-dessus obtient simplement tous les formulaires via <strong>querySelectorAll</strong> et retourne une NodeList statique qui représente une liste des éléments du document à l’aide de la <strong>.requires-validation</strong> classer. <p>Ensuite, pour chacun des formulaires trouvés, le code JavaScript ajoutera un <strong>EventListener</strong> qui sera appelé chaque fois que l’événement spécifié est livré et qui est soumis. Ainsi, chaque fois qu’un utilisateur soumet le formulaire, <strong>form.checkValidity () </strong>sera appelé. Cette méthode vérifie si le champ de données a des contraintes et remplit les contraintes données. En cas d’échec, le navigateur déclenche simplement un événement invalide et renvoie false. <p>Donc, en cas d’échec, il appellera les deux méthodes JavaScript suivantes: <ul> <li> <strong>preventDefault ()</strong> – une méthode qui empêchera simplement l’événement par défaut d’être pris comme il le serait normalement. Dans ce cas, la soumission du formulaire.</li> <li> <strong>stopPropagation ()</strong> – une méthode qui empêche la poursuite de la propagation (bouillonnement) de l’événement en cours.</li> </ul> <p>Enfin, il ajoutera <strong>.a été validé</strong> classe dans la balise form pour afficher l’état de validation du formulaire et les messages. <p>Bootstrap couvre le <strong>:invalide</strong> et <strong>:valide</strong> styles à parent <strong>.a été validé</strong> classe lorsqu’elle est appliquée au formulaire. Vous pouvez réellement mettre le <strong>.a été validé</strong> classe à la balise de formulaire même sans l’aide de JavaScript, mais qui affichera automatiquement les états de validation du formulaire et les messages avant même que l’utilisateur ne soumette le formulaire. Cependant, avoir JavaScript pour s’occuper de l’événement de soumission et de validation du formulaire vous donnera un processus de validation contemporain plus sécurisé côté client. <p>Voyons à quoi cela devrait ressembler dans le navigateur: <figure id="attachment_620843" class="alignleft"><img loading="lazy" class="size-full wp-image-620843" src="https://designmodo.com/wp-content/uploads/2021/03/image2.png" alt="Code JavaScript" width="527" height="334" srcset="https://designmodo.com/wp-content/uploads/2021/03/image2.png 527w, https://designmodo.com/wp-content/uploads/2021/03/image2-5x3.png 5w, https://designmodo.com/wp-content/uploads/2021/03/image2-300x190.png 300w" sizes="(max-width: 527px) 100vw, 527px"/></figure> <h3><span id="putting-it-all-together">Mettre tous ensemble</span><br /> </h3> <p>Maintenant, pour mettre tout cela ensemble, créons une page d’inscription simple et voyons comment nous pouvons appliquer les styles de validation contemporains de Bootstrap 5 sur chaque champ de données. <p>Ci-dessous le balisage. <pre class="brush: xml; title: ; notranslate" title=""> <div class="form-body"> <div class="row"> <div class="form-holder"> <div class="form-content"> <div class="form-items"> <h3>Register Today</h3> <p>Fill in the data below.</p> <form class="requires-validation" novalidate> <div class="col-md-12"> <input class="form-control" type="text" name="name" placeholder="Full Name" required> <div class="valid-feedback">Username field is valid!</div> <div class="invalid-feedback">Username field cannot be blank!</div> </div> <div class="col-md-12"> <input class="form-control" type="email" name="email" placeholder="E-mail Address" required> <div class="valid-feedback">Email field is valid!</div> <div class="invalid-feedback">Email field cannot be blank!</div> </div> <div class="col-md-12"> <select class="form-select mt-3" required> <option selected disabled value="">Position</option> <option value="jweb">Junior Web Developer</option> <option value="sweb">Senior Web Developer</option> <option value="pmanager">Project Manager</option> </select> <div class="valid-feedback">You selected a position!</div> <div class="invalid-feedback">Please select a position!</div> </div> <div class="col-md-12"> <input class="form-control" type="password" name="password" placeholder="Password" required> <div class="valid-feedback">Password field is valid!</div> <div class="invalid-feedback">Password field cannot be blank!</div> </div> <div class="col-md-12 mt-3"> <label class="mb-3 mr-1" for="gender">Gender: </label> <input type="radio" class="btn-check" name="gender" id="male" autocomplete="off" required> <label class="btn btn-sm btn-outline-secondary" for="male">Male</label> <input type="radio" class="btn-check" name="gender" id="female" autocomplete="off" required> <label class="btn btn-sm btn-outline-secondary" for="female">Female</label> <input type="radio" class="btn-check" name="gender" id="secret" autocomplete="off" required> <label class="btn btn-sm btn-outline-secondary" for="secret">Secret</label> <div class="valid-feedback mv-up">You selected a gender!</div> <div class="invalid-feedback mv-up">Please select a gender!</div> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required> <label class="form-check-label">I confirm that all data are correct</label> <div class="invalid-feedback">Please confirm that the entered data are all correct!</div> </div> <div class="form-button mt-3"> <button id="submit" type="submit" class="btn btn-primary">Register</button> </div> </form> </div> </div> </div> </div> </div> </pre> <p>Ensuite, j’ai ajouté CSS pour personnaliser l’apparence de notre formulaire. <pre class="brush: css; title: ; notranslate" title=""> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;900&display=swap'); *, body { font-family: 'Poppins', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; } html, body { height: 100%; background-color: #152733; overflow: hidden; } .form-holder { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 100vh; } .form-holder .form-content { position: relative; text-align: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; padding: 60px; } .form-content .form-items { border: 3px solid #fff; padding: 40px; display: inline-block; width: 100%; min-width: 540px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: left; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .form-content h3 { color: #fff; text-align: left; font-size: 28px; font-weight: 600; margin-bottom: 5px; } .form-content h3.form-title { margin-bottom: 30px; } .form-content p { color: #fff; text-align: left; font-size: 17px; font-weight: 300; line-height: 20px; margin-bottom: 30px; } .form-content label, .was-validated .form-check-input:invalid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label { color: #fff; } .form-content input[type=text], .form-content input[type=password], .form-content input[type=email], .form-content select { width: 100%; padding: 9px 20px; text-align: left; border: 0; outline: 0; border-radius: 6px; background-color: #fff; font-size: 15px; font-weight: 300; color: #8D8D8D; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; margin-top: 16px; } .btn-primary { background-color: #6C757D; outline: none; border: 0px; box-shadow: none; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #495056; outline: none !important; border: none !important; box-shadow: none; } .form-content textarea { position: static !important; width: 100%; padding: 8px 20px; border-radius: 6px; text-align: left; background-color: #fff; border: 0; font-size: 15px; font-weight: 300; color: #8D8D8D; outline: none; resize: none; height: 120px; -webkit-transition: none; transition: none; margin-bottom: 14px; } .form-content textarea:hover, .form-content textarea:focus { border: 0; background-color: #ebeff8; color: #8D8D8D; } .mv-up { margin-top: -9px !important; margin-bottom: 8px !important; } .invalid-feedback { color: #ff606e; } .valid-feedback { color: #2acc80; } </pre> <p>Enfin, nous utiliserons le même code JavaScript ci-dessus pour empêcher l’utilisateur de soumettre des champs vides ainsi que pour afficher les états de validation et les styles de message de validation de formulaire. <p>J’ai compilé le code ci-dessous sur Codepen. N’hésitez pas à le modifier et à jouer. <p class="codepen" data-height="665" data-theme-id="dark" data-default-tab="html,result" data-user="samnorton" data-slug-hash="oNYajYM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Registration Form (Bootstrap 5 Validation)"> <span>Voir le stylo <a target="_blank" href="https://codepen.io/samnorton/pen/oNYajYM" data-wpel-link="external" rel="nofollow noopener"><br />Formulaire d’inscription (validation Bootstrap 5)</a> par Sam Norton (<a target="_blank" href="https://codepen.io/samnorton" data-wpel-link="external" rel="nofollow noopener">@samnorton</a>)<br />sur <a target="_blank" href="https://codepen.io" data-wpel-link="external" rel="nofollow noopener">CodePen</a>.</span> <h2><span id="wrapping-up">Emballer</span><br /> </h2> <p>La création de sites Web et même d’applications aujourd’hui est beaucoup plus difficile et prend du temps qu’auparavant. L’utilisation des méthodes et des styles de validation contemporains de Bootstrap 5 vous fournira un moyen simple, mais des commentaires précieux et exploitables à vos utilisateurs prêts à l’emploi sans trop vous soucier des styles. <p>La meilleure partie est que vous pouvez toujours personnaliser le message de validation du formulaire, y compris les styles à votre goût sans réinventer la roue. <div class="block-bottom"> <div class="fix-8-12 subscribe-form ae-1" style="background:linear-gradient(-45deg, #0982a7,hsla(218, 100%, 26%, 1));"> <h5 class="small margin-bottom-2">Vous aimez ce que vous lisez? Abonnez-vous à nos meilleures histoires.</h5> </div> </div></div> <p> — to <a href="https://designmodo.com/validate-forms-bootstrap/ ">designmodo.com </a> <div class="mads-block"></div><div class="jeg_ad jeg_ad_article jnews_content_inline_ads "><div class='ads-wrapper align-center '><div class='ads_code'><a href="<a href="https://www.magenet.com/?ref=referral&ref_type=banner&ref_id=ceisdpk1phuam21r&ref_item=9" target="_blank" rel="nofollow"><img style="background: #FFF; border: 0;" src="https://gainrock.com/img/banners/mn/728x90-Monetize_Your_Website.gif"/></a></div></div></div> </div> </div> <div class="jeg_share_bottom_container"></div> <div class='jeg_push_notification single_post'> <div class="jeg_push_notification_content"> <p>Get real time update about this post categories directly on your device, subscribe now.</p> <div class="jeg_push_notification_button"> <input type="hidden" name="post-category" value="language-html5"> <input type="hidden" name="button-subscribe" value="Subscribe"> <input type="hidden" name="button-unsubscribe" value="Unsubscribe"> <input type="hidden" name="button-processing" value="Processing . . ."> <a data-action="unsubscribe" data-type="category" class="button" href="#"> <i class="fa fa-bell-slash-o"></i> Unsubscribe </a> </div> </div> </div> <div class="jeg_ad jeg_article jnews_content_bottom_ads "><div class='ads-wrapper '></div></div><div class="jnews_prev_next_container"></div><div class="jnews_author_box_container "> <div class="jeg_authorbox"> <div class="jeg_author_image"> <img alt='admin237' src='https://secure.gravatar.com/avatar/5955a4ab55ab39e4f1f103b50a6d1ea9?s=80&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/5955a4ab55ab39e4f1f103b50a6d1ea9?s=160&d=mm&r=g 2x' class='avatar avatar-80 photo' height='80' width='80' loading='lazy'/> </div> <div class="jeg_author_content"> <h3 class="jeg_author_name"> <a href="https://mycamer.net/author/admin237/"> admin237 </a> </h3> <p class="jeg_author_desc"> </p> <div class="jeg_author_socials"> <a target='_blank' href='https://mycamer.net' class='url'><i class='fa fa-globe'></i> </a> </div> </div> </div> </div><div class="jnews_related_post_container"></div><div class='jnews-autoload-splitter' data-url="https://mycamer.net/comment-valider-des-formulaires-avec-bootstrap-5/" data-title="Comment valider des formulaires avec Bootstrap 5" data-id="232" data-prev="https://mycamer.net/la-neurochirurgie-integra-iart-se-developpe-sequentiellement-au-milieu-des-problemes-dapprovisionnement/" ></div><div class="jnews_popup_post_container"></div><div class="jnews_comment_container"></div> </div> </div> <div class="jeg_sidebar jeg_sticky_sidebar col-md-4"> <div class="widget widget_jnews_social_counter" id="jnews_social_counter-1"><div class="jeg_block_heading jeg_block_heading_5 jnews_module_232_0_61746fd01dcf4"> <h3 class="jeg_block_title"><span>Stay Connected</span></h3> </div><ul class="jeg_socialcounter col1 light"> <li class="jeg_facebook"> <a href="https://www.facebook.com/architecturaldigest/" target="_blank"><i class="fa fa-facebook"></i> <span>4.4M</span> <small>Fans</small> </a> </li><li class="jeg_instagram"> <a href="https://www.instagram.com/envato/" target="_blank"><i class="fa fa-instagram"></i> <span>55.6k</span> <small>Followers</small> </a> </li><li class="jeg_youtube"> <a href="http://www.youtube.com/user/Envato" target="_blank"><i class="fa fa-youtube"></i> <span>113k</span> <small>Subscribers</small> </a> </li> </ul></div><div class="widget widget_jnews_popular" id="jnews_popular-1"><div class="jeg_block_heading jeg_block_heading_5 jnews_module_232_0_61746fd3a0525"> <h3 class="jeg_block_title"><span>Articles populaires</span></h3> </div><div class="alert alert-error"> <strong>Plugin Install</strong> : Popular Post Widget need JNews - View Counter to be installed</div></div><div class="widget widget_jnews_facebook_page" id="jnews_facebook_page-1"><div class="jeg_block_heading jeg_block_heading_5 jnews_module_232_0_61746fd3a0821"> <h3 class="jeg_block_title"><a href='https://www.facebook.com/architecturaldigest/'><span>Follow Our Page</span></a></h3> </div> <div class="jeg_facebook_widget"> <div class="fb-page" data-href="https://www.facebook.com/architecturaldigest/" data-small-header="" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-tabs="timeline" data-height="" data-id="267719674352"> </div> </div> </div></div> </div> <div class="jeg_ad jeg_article jnews_article_bottom_ads"> <div class='ads-wrapper '></div> </div> </div> </div> </div> </div> <div id="post-body-class" class="post-template-default single single-post postid-232 single-format-standard wp-embed-responsive jeg_toggle_dark jeg_single_tpl_1 jnews jeg_boxed jsc_normal wpb-js-composer js-comp-ver-6.7.0 vc_responsive"></div> </div> <div class="post-ajax-overlay"> <div class="preloader_type preloader_square"> <div class="newsfeed_preloader jeg_preloader dot"> <span></span><span></span><span></span> </div> <div class="newsfeed_preloader jeg_preloader circle"> <div class="jnews_preloader_circle_outer"> <div class="jnews_preloader_circle_inner"></div> </div> </div> <div class="newsfeed_preloader jeg_preloader square"> <div class="jeg_square"><div class="jeg_square_inner"></div></div> </div> </div> </div> </div> <!-- wmm d --> <div class="footer-holder" id="footer" data-id="footer"> <div class="jeg_footer_instagram_wrapper jeg_container"> <div class='jeg_instagram_feed clearfix'> <h3 class='jeg_instagram_heading'> <a href='//www.instagram.com/' target='_blank'> <i class='fa fa-instagram'></i> Follow Us </a> </h3> <ul class='instagram-pics instagram-size-large col5 zoom'><div class="alert alert-error alert-compatibility" style="position: relative; opacity: 1; visibility: visible;">Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.</div></ul> </div> </div> <div class="jeg_footer_tiktok_wrapper jeg_container"> </div> <div class="jeg_footer jeg_footer_5 dark"> <div class="jeg_footer_container jeg_container"> <div class="jeg_footer_content"> <div class="container"> <div class="jeg_footer_social"> <div class="socials_widget jeg_new_social_icon_block circle"> <a href="https://www.facebook.com/jegtheme/" target='_blank' rel='external noopener nofollow' class="jeg_facebook"><i class="fa fa-facebook"></i> <span>Facebook</span></a><a href="https://twitter.com/jegtheme" target='_blank' rel='external noopener nofollow' class="jeg_twitter"><i class="fa fa-twitter"></i> <span>Twitter</span></a><a href="http://youtube.com/" target='_blank' rel='external noopener nofollow' class="jeg_youtube"><i class="fa fa-youtube-play"></i> <span>Youtube</span></a><a href="http://vimeo.com" target='_blank' rel='external noopener nofollow' class="jeg_vimeo"><i class="fa fa-vimeo"></i> <span>Vimeo</span></a><a href="http://instagram.com" target='_blank' rel='external noopener nofollow' class="jeg_instagram"><i class="fa fa-instagram"></i> <span>Instagram</span></a> </div> </div> <div class="jeg_footer_primary clearfix"> <!-- Footer Widget: Column 1 --> <div class="col-md-4 footer_column"> <div class="footer_widget widget_text" id="text-1"> <div class="textwidget"><img class="aligncenter" src="https://mycamer.net/wp-content/uploads/2021/03/logo.jpg" /> <br/> We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.</div> </div> </div> <!-- Footer Widget: Column 2 --> <div class="col-md-4 footer_column"> <div class="footer_widget widget_categories" id="categories-3"><div class="jeg_footer_heading jeg_footer_heading_1"><h3 class="jeg_footer_title"><span>Category</span></h3></div> <ul> <li class="cat-item cat-item-2"><a href="https://mycamer.net/news/actualite/" title="L'actualité des nouvelles technologies">Actualité</a> </li> <li class="cat-item cat-item-13"><a href="https://mycamer.net/news/article-sponsorise/" title="Article Sponsorisé">Article Sponsorisé</a> </li> <li class="cat-item cat-item-12"><a href="https://mycamer.net/news/astuces/" title="Astuces">Astuces</a> </li> <li class="cat-item cat-item-11"><a href="https://mycamer.net/news/jeu-video/" title="Jeu vidéo">Jeu vidéo</a> </li> <li class="cat-item cat-item-6"><a href="https://mycamer.net/news/developpement-web/language-html5/" title="Language HTML5">Language HTML5</a> </li> <li class="cat-item cat-item-3"><a href="https://mycamer.net/news/mobile/" title="Les mobiles recents et information générale sur les nouvelles sorties">Mobile</a> </li> <li class="cat-item cat-item-587"><a href="https://mycamer.net/news/portrait/" title="portrait">portrait</a> </li> <li class="cat-item cat-item-4"><a href="https://mycamer.net/news/technologies/" title="Technologies">Technologies</a> </li> </ul> </div> </div> <!-- Footer Widget: Column 3 --> <div class="col-md-4 footer_column"> <div class="footer_widget widget_jnews_recent_news" id="jnews_recent_news-1"><div class="jeg_footer_heading jeg_footer_heading_1"><h3 class="jeg_footer_title"><span>Recent News</span></h3></div> <div class="jeg_postblock"> <div class="jeg_post jeg_pl_sm post-11211 post type-post status-publish format-standard has-post-thumbnail hentry category-jeu-video"> <div class="jeg_thumb"> <a href="https://mycamer.net/un-sondage-revele-a-quoi-les-joueurs-pensent-que-le-personnage-parfait-ressemble/"> <div class="thumbnail-container animate-lazy size-715 "><img width="120" height="86" src="https://mycamer.net/wp-content/themes/jnews/assets/img/jeg-empty.png" class="attachment-jnews-120x86 size-jnews-120x86 lazyload wp-post-image" alt="Un sondage révèle à quoi les joueurs pensent que le personnage parfait ressemble" loading="lazy" sizes="(max-width: 120px) 100vw, 120px" data-full-width="1400" data-full-height="700" data-src="https://mycamer.net/wp-content/uploads/2021/10/Video-game-ultimate-header-120x86.jpg" data-srcset="https://mycamer.net/wp-content/uploads/2021/10/Video-game-ultimate-header-120x86.jpg 120w, https://mycamer.net/wp-content/uploads/2021/10/Video-game-ultimate-header-350x250.jpg 350w, https://mycamer.net/wp-content/uploads/2021/10/Video-game-ultimate-header-750x536.jpg 750w" data-sizes="auto" data-expand="700" /></div> </a> </div> <div class="jeg_postblock_content"> <h3 property="headline" class="jeg_post_title"><a property="url" href="https://mycamer.net/un-sondage-revele-a-quoi-les-joueurs-pensent-que-le-personnage-parfait-ressemble/">Un sondage révèle à quoi les joueurs pensent que le personnage parfait ressemble</a></h3> <div class="jeg_post_meta"> <div property="datePublished" class="jeg_meta_date"><i class="fa fa-clock-o"></i> octobre 23, 2021</div> </div> </div> </div> <div class="jeg_post jeg_pl_sm post-11207 post type-post status-publish format-standard has-post-thumbnail hentry category-actualite"> <div class="jeg_thumb"> <a href="https://mycamer.net/dans-lenquete-sur-un-tueur-en-serie-de-long-island-une-nouvelle-technologie-telephonique-peut-etre-la-cle-pour-casser-au-cas-ou/"> <div class="thumbnail-container animate-lazy size-715 "><img width="120" height="86" src="https://mycamer.net/wp-content/themes/jnews/assets/img/jeg-empty.png" class="attachment-jnews-120x86 size-jnews-120x86 lazyload wp-post-image" alt="Dans l’enquête sur un tueur en série de Long Island, une nouvelle technologie téléphonique peut être la clé pour casser au cas où" loading="lazy" sizes="(max-width: 120px) 100vw, 120px" data-full-width="1280" data-full-height="720" data-src="https://mycamer.net/wp-content/uploads/2021/10/BeFunky-collage-24-120x86.jpg" data-srcset="https://mycamer.net/wp-content/uploads/2021/10/BeFunky-collage-24-120x86.jpg 120w, https://mycamer.net/wp-content/uploads/2021/10/BeFunky-collage-24-350x250.jpg 350w, https://mycamer.net/wp-content/uploads/2021/10/BeFunky-collage-24-750x536.jpg 750w" data-sizes="auto" data-expand="700" /></div> </a> </div> <div class="jeg_postblock_content"> <h3 property="headline" class="jeg_post_title"><a property="url" href="https://mycamer.net/dans-lenquete-sur-un-tueur-en-serie-de-long-island-une-nouvelle-technologie-telephonique-peut-etre-la-cle-pour-casser-au-cas-ou/">Dans l’enquête sur un tueur en série de Long Island, une nouvelle technologie téléphonique peut être la clé pour casser au cas où</a></h3> <div class="jeg_post_meta"> <div property="datePublished" class="jeg_meta_date"><i class="fa fa-clock-o"></i> octobre 23, 2021</div> </div> </div> </div> </div> </div> </div> </div> <div class="jeg_footer_secondary clearfix"> <div class="footer_center"> <p class="copyright"> © 2021 <a href="http://jegtheme.com" title="Premium WordPress news & magazine theme">JNews</a> - Premium WordPress news & magazine theme by <a href="http://jegtheme.com" title="Jegtheme">Jegtheme</a>.</p> </div> </div> </div> </div> </div> </div><!-- /.footer --> </div> <div class="jscroll-to-top"> <a href="#back-to-top" class="jscroll-to-top_link"><i class="fa fa-angle-up"></i></a> </div> </div> <!-- Mobile Navigation ============================================= --> <div id="jeg_off_canvas" class="normal"> <a href="#" class="jeg_menu_close"><i class="jegicon-cross"></i></a> <div class="jeg_bg_overlay"></div> <div class="jeg_mobile_wrapper"> <div class="nav_wrap"> <div class="item_main"> <!-- Search Form --> <div class="jeg_aside_item jeg_search_wrapper jeg_search_no_expand round"> <a href="#" class="jeg_search_toggle"><i class="fa fa-search"></i></a> <form action="https://mycamer.net/" method="get" class="jeg_search_form" target="_top"> <input name="s" class="jeg_search_input" placeholder="Search..." type="text" value="" autocomplete="off"> <button aria-label="Search Button" type="submit" class="jeg_search_button btn"><i class="fa fa-search"></i></button> </form> <!-- jeg_search_hide with_result no_result --> <div class="jeg_search_result jeg_search_hide with_result"> <div class="search-result-wrapper"> </div> <div class="search-link search-noresult"> No Result </div> <div class="search-link search-all-button"> <i class="fa fa-search"></i> View All Result </div> </div></div><div class="jeg_aside_item"> <ul class="jeg_mobile_menu"><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-95"><a href="https://mycamer.net/news/actualite/">Actualité</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-96"><a href="https://mycamer.net/news/mobile/">Mobile</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="https://mycamer.net/news/jeu-video/">Jeu vidéo</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-53"><a href="https://mycamer.net/news/developpement-web/">Developpement web</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-55"><a href="https://mycamer.net/news/astuces/">Astuces</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-54"><a href="https://mycamer.net/news/nous-contacter/">Nous contacter</a></li> </ul></div> </div> <div class="item_bottom"> <div class="jeg_aside_item socials_widget nobg"> <a href="https://www.facebook.com/jegtheme/" target='_blank' rel='external noopener nofollow' class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="https://twitter.com/jegtheme" target='_blank' rel='external noopener nofollow' class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="http://youtube.com/" target='_blank' rel='external noopener nofollow' class="jeg_youtube"><i class="fa fa-youtube-play"></i> </a><a href="http://vimeo.com" target='_blank' rel='external noopener nofollow' class="jeg_vimeo"><i class="fa fa-vimeo"></i> </a><a href="http://instagram.com" target='_blank' rel='external noopener nofollow' class="jeg_instagram"><i class="fa fa-instagram"></i> </a></div><div class="jeg_aside_item jeg_aside_copyright"> <p>© 2021 <a href="http://jegtheme.com" title="Premium WordPress news & magazine theme">JNews</a> - Premium WordPress news & magazine theme by <a href="http://jegtheme.com" title="Jegtheme">Jegtheme</a>.</p> </div> </div> </div> </div> </div><!-- Login Popup Content --> <div id="jeg_loginform" class="jeg_popup mfp-with-anim mfp-hide"> <div class="jeg_popupform jeg_popup_account"> <form action="#" data-type="login" method="post" accept-charset="utf-8"> <h3>Welcome Back!</h3><div class="social-login-wrapper login normal"> <div class="social-login-item"> <a href="" class="btn btn-facebook"> <i class="fa fa-facebook"></i> <span>Sign In with Facebook</span> </a> </div><div class="social-login-item"> <a href="" class="btn btn-google"> <i class="fa fa-google"></i> <span>Sign In with Google</span> </a> </div> <div class="social-login-line"> <span>OR</span> </div> </div> <p>Login to your account below</p> <!-- Form Messages --> <div class="form-message"></div> <p class="input_field"> <input type="text" name="username" placeholder="Username" value=""> </p> <p class="input_field"> <input type="password" name="password" placeholder="Password" value=""> </p> <p class="input_field remember_me"> <input type="checkbox" id="remember_me" name="remember_me" value="true"> <label for="remember_me">Remember Me</label> </p> <div class="g-recaptcha" data-sitekey=""></div> <p class="submit"> <input type="hidden" name="action" value="login_handler"> <input type="hidden" name="jnews_nonce" value="4073b64fdf"> <input type="submit" name="jeg_login_button" class="button" value="Log In" data-process="Processing . . ." data-string="Log In"> </p> <div class="bottom_links clearfix"> <a href="#jeg_forgotform" class="jeg_popuplink forgot">Forgotten Password?</a> </div> </form> </div> </div> <!-- Forgot Password Popup Content --> <div id="jeg_forgotform" class="jeg_popup mfp-with-anim mfp-hide"> <div class="jeg_popupform jeg_popup_account"> <form action="#" data-type="forgot" method="post" accept-charset="utf-8"> <h3>Retrieve your password</h3> <p>Please enter your username or email address to reset your password.</p> <!-- Form Messages --> <div class="form-message"></div> <p class="input_field"> <input type="text" name="user_login" placeholder="Your email or username" value=""> </p> <div class="g-recaptcha" data-sitekey=""></div> <p class="submit"> <input type="hidden" name="action" value="forget_password_handler"> <input type="hidden" name="jnews_nonce" value="4073b64fdf"> <input type="submit" name="jeg_login_button" class="button" value="Reset Password" data-process="Processing . . ." data-string="Reset Password"> </p> <div class="bottom_links clearfix"> <a href="#jeg_loginform" class="jeg_popuplink"><i class="fa fa-lock"></i> Log In</a> </div> </form> </div> </div> <script type="text/javascript">var jfla = ["view_counter"]</script><div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="pswp__bg"></div> <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div><div id="jeg_playlist" class="jeg_popup create_playlist mfp-with-anim mfp-hide"> <div class="jeg_popupform jeg_popupform_playlist"> <form action="#" method="post" accept-charset="utf-8"> <h3>Add New Playlist</h3> <!-- Form Messages --> <div class="form-message"></div> <div class="form-group"> <p class="input_field"> <input type="text" name="title" placeholder="Playlist Name" value=""> </p> <p class="input_field"> <select name='visibility'><option disabled selected='selected' value=''>- Select Visibility -</option><option value='public' >Public</option><option value='private' >Private</option></select> </p> <!-- submit button --> <div class="submit"> <input type="hidden" name="type" value="create_playlist"> <input type="hidden" name="action" value="playlist_handler"> <input type="hidden" name="post_id" value=""> <input type="hidden" name="jnews-playlist-nonce" value="0d90796030"> <input type="submit" name="jeg_save_button" class="button" value="Save" data-process="Processing . . ." data-string="Save"> </div> </div> </form> </div> </div> <div id="notification_action_renderer" class="jeg_popup_container"> <div id="paper_toast"> <span id="label"></span> </div> </div> <div id="selectShareContainer"> <div class="selectShare-inner"> <div class="select_share jeg_share_button"> <button class="select-share-button jeg_btn-facebook" data-url="http://www.facebook.com/sharer.php?u=[url]"e=[selected_text]" data-post-url="https%3A%2F%2Fmycamer.net%2Fcomment-valider-des-formulaires-avec-bootstrap-5%2F" data-image-url="" data-title="Comment+valider+des+formulaires+avec+Bootstrap+5" ><i class="fa fa-facebook-official"></i></a><button class="select-share-button jeg_btn-twitter" data-url="https://twitter.com/intent/tweet?text=[selected_text]&url=[url]" data-post-url="https%3A%2F%2Fmycamer.net%2Fcomment-valider-des-formulaires-avec-bootstrap-5%2F" data-image-url="" data-title="Comment+valider+des+formulaires+avec+Bootstrap+5" ><i class="fa fa-twitter"></i></a> </div> <div class="selectShare-arrowClip"> <div class="selectShare-arrow"></div> </div> </div> </div><div class="jnews-cookie-law-policy">This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our <a href="#">Privacy and Cookie Policy</a>. <button data-expire="7" class="btn btn-cookie">I Agree</button></div><div class="jeg_read_progress_wrapper"></div><script type='text/javascript' src='https://mycamer.net/wp-includes/js/jquery/ui/core.min.js?ver=1.12.1' id='jquery-ui-core-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/jquery/ui/mouse.min.js?ver=1.12.1' id='jquery-ui-mouse-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/jquery/ui/sortable.min.js?ver=1.12.1' id='jquery-ui-sortable-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-frontend-submit/assets/js/frontend.js?ver=9.0.2' id='jnews-frontend-submit-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.12.1' id='jquery-ui-datepicker-js'></script> <script type='text/javascript' id='jquery-ui-datepicker-js-after'> jQuery(document).ready(function(jQuery){jQuery.datepicker.setDefaults({"closeText":"Fermer","currentText":"Aujourd\u2019hui","monthNames":["janvier","f\u00e9vrier","mars","avril","mai","juin","juillet","ao\u00fbt","septembre","octobre","novembre","d\u00e9cembre"],"monthNamesShort":["Jan","F\u00e9v","Mar","Avr","Mai","Juin","Juil","Ao\u00fbt","Sep","Oct","Nov","D\u00e9c"],"nextText":"Suivant","prevText":"Pr\u00e9c\u00e9dent","dayNames":["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"],"dayNamesShort":["dim","lun","mar","mer","jeu","ven","sam"],"dayNamesMin":["D","L","M","M","J","V","S"],"dateFormat":"MM d, yy","firstDay":1,"isRTL":false});}); </script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-auto-load-post/assets/js/jquery.autoload.js' id='jnews-autoload-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-video/assets/js/supposition.js?ver=9.0.4' id='supposition-js'></script> <script type='text/javascript' id='jnews-video-js-extra'> /* <![CDATA[ */ var jnewsvideo = {"user_playlist":[]}; /* ]]> */ </script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-video/assets/js/plugin.js?ver=9.0.4' id='jnews-video-js'></script> <script type='text/javascript' id='jnews-frontend-js-extra'> /* <![CDATA[ */ var jnewsoption = {"login_reload":"https:\/\/mycamer.net\/comment-valider-des-formulaires-avec-bootstrap-5","popup_script":"photoswipe","single_gallery":"","ismobile":"","isie":"","sidefeed_ajax":"","language":"fr_FR","module_prefix":"jnews_module_ajax_","live_search":"1","postid":"232","isblog":"1","admin_bar":"0","follow_video":"","follow_position":"top_right","rtl":"0","gif":"","lang":{"invalid_recaptcha":"Invalid Recaptcha!","empty_username":"Please enter your username!","empty_email":"Please enter your email!","empty_password":"Please enter your password!"},"recaptcha":"0","site_slug":"\/","site_domain":"mycamer.net","zoom_button":"0","autoload_limit":"10","autoload_content":""}; /* ]]> */ </script> <script type='text/javascript' src='https://mycamer.net/wp-content/themes/jnews/assets/dist/frontend.min.js?ver=10.0.3' id='jnews-frontend-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-split/assets/js/jquery.split.js' id='jnews-split-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/comment-reply.min.js?ver=5.8.1' id='comment-reply-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/themes/jnews/assets/js/photoswipe/photoswipe.js?ver=10.0.3' id='photoswipe-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/themes/jnews/assets/js/photoswipe/photoswipe-ui-default.js?ver=10.0.3' id='photoswipe-ui-default-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/hoverIntent.min.js?ver=1.10.1' id='hoverIntent-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/imagesloaded.min.js?ver=4.1.4' id='imagesloaded-js'></script> <!--[if lt IE 9]> <script type='text/javascript' src='https://mycamer.net/wp-content/themes/jnews/assets/js/html5shiv.min.js?ver=10.0.3' id='html5shiv-js'></script> <![endif]--> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-like/assets/js/plugin.js?ver=9.0.1' id='jnews-like-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-social-login/assets/js/plugin.js?ver=9.0.0' id='jnews-social-login-style-js'></script> <script type='text/javascript' id='jnews-select-share-js-extra'> /* <![CDATA[ */ var jnews_select_share = {"is_customize_preview":""}; /* ]]> */ </script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-social-share/assets/js/plugin.js' id='jnews-select-share-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-weather/assets/js/plugin.js?ver=9.0.1' id='jnews-weather-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-push-notification/assets/js/plugin.js?ver=9.0.0' id='jnews-push-notification-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-includes/js/wp-embed.min.js?ver=5.8.1' id='wp-embed-js'></script> <script type='text/javascript' src='https://cdn.onesignal.com/sdks/OneSignalSDK.js?ver=5.8.1' async='async' id='remote_sdk-js'></script> <script type='text/javascript' src='https://mycamer.net/wp-content/plugins/jnews-instagram/assets/js/plugin.js?ver=9.0.0' id='jnews-instagram-js'></script> <div class="jeg_ad jnews_mobile_sticky_ads "></div><script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"article","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/mycamer.net\/comment-valider-des-formulaires-avec-bootstrap-5\/"},"dateCreated":"2021-03-11 05:18:36","datePublished":"2021-03-11 05:18:36","dateModified":"2021-03-11 05:18:36","url":"https:\/\/mycamer.net\/comment-valider-des-formulaires-avec-bootstrap-5\/","headline":"Comment valider des formulaires avec Bootstrap 5","name":"Comment valider des formulaires avec Bootstrap 5","articleBody":" [ad_1]\r\n<br><div>\n\n\t\t\t\n\n\t\t\t\n\n\t\t\t<p class=\"meta\">\n\t\t\t\t<strong class=\"categories\"><a target=\"_blank\" href=\"https:\/\/designmodo.com\/tutorials\/bootstrap\/\" title=\"View all posts in Bootstrap\" class=\"post_tag category-bootstrap\" data-wpel-link=\"internal\" rel=\"noopener\">Amorcer<\/a><\/strong><a target=\"_blank\" href=\"https:\/\/designmodo.com\/author\/samuelnorton\/\" title=\"Posts by Sam Norton\" rel=\"author noopener\" data-wpel-link=\"internal\">Sam Norton<\/a> \u2022 <span itemprop=\"datePublished\" content=\"2021-03-10\">10 mars 2021<\/span> \u2022 7 minutes de lecture \t\t\t<\/p>\n\n\t\t\t<p>La validation des formulaires est l'un des facteurs les plus critiques lorsqu'il s'agit de collecter des informations et de pr\u00e9venir l'utilisation abusive des formulaires Web.<\/p>\n<p>En plus de vous \u00e9viter d'\u00e9ventuelles cyberattaques, la validation de formulaire prot\u00e8ge \u00e9galement votre site Web contre les mauvaises entr\u00e9es de formulaire. Lors de la soumission du formulaire avec validation, l'utilisateur aura la possibilit\u00e9 de modifier les champs de donn\u00e9es contenant des donn\u00e9es non valides avant de les soumettre.<\/p>\n<p>En g\u00e9n\u00e9ral, vous avez besoin de la validation du formulaire comme mesure de s\u00e9curit\u00e9, car les donn\u00e9es de formulaire invalides sont l'une des principales sources de vuln\u00e9rabilit\u00e9s de s\u00e9curit\u00e9 du site Web.<\/p>\n<p>Les formulaires sont enti\u00e8rement pris en charge dans <a target=\"_blank\" href=\"https:\/\/designmodo.com\/bootstrap-5\/\" data-wpel-link=\"internal\" rel=\"noopener\">Bootstrap 5<\/a>. La plupart des composants sont principalement utilis\u00e9s pour donner aux formulaires un aspect propre et r\u00e9actif, ce qui peut \u00eatre utilis\u00e9 avec n'importe quelle taille d'\u00e9cran. Alors que les formulaires Bootstrap 5 re\u00e7oivent automatiquement le formatage correct via des classes donn\u00e9es, en ce qui concerne <a target=\"_blank\" href=\"https:\/\/designmodo.com\/ux-form-validation\/\" data-wpel-link=\"internal\" rel=\"noopener\">validation de formulaire<\/a> vous devez configurer des classes suppl\u00e9mentaires et du JavaScript afin de profiter de son support de validation contemporain d\u00e8s la sortie de la bo\u00eete.<\/p>\n<p>Dans cet article, je vais vous montrer comment utiliser la validation de formulaire Bootstrap 5 pour pr\u00e9senter des commentaires exploitables d\u00e9cents sur les champs de donn\u00e9es de formulaire tels que la zone de texte, la s\u00e9lection, la case \u00e0 cocher, le bouton radio ainsi que d'autres champs de formulaire bootstrap disponibles lors de la soumission du formulaire. Nous utiliserons JavaScript pour d\u00e9sactiver les soumissions de formulaires si des champs invalides sont entr\u00e9s.<\/p>\n<p><strong>Noter:<\/strong> HTML 5 a ses propres moyens de validation, mais il a des limites, en particulier en ce qui concerne la prise en charge des navigateurs. L'une des limitations notables est le manque de personnalisation en ce qui concerne la gestion des messages d'erreur dont vous aurez besoin pour trouver un moyen d'\u00eatre tri\u00e9s. Heureusement, Bootstrap 5 a \u00e0 port\u00e9e de main des styles de validation de formulaire contemporains.<\/p><div class=\"block-p\"><div class=\"fix-8-12 fix-tablet-12-12 margin-top-3\">\n <div class=\"info-box ae-2\" style=\"background: linear-gradient(-45deg, hsl(196, 40%, 91%),hsl(196, 21%, 97%));\">\n <p>G\u00e9n\u00e9rateur de mod\u00e8les d'e-mails en ligne<\/p>\n <p class=\"ae-4\">Avec <a target=\"_blank\" class=\"link\" href=\"https:\/\/designmodo.com\/postcards\/\" data-wpel-link=\"internal\" rel=\"noopener\">Cartes postales<\/a> vous pouvez cr\u00e9er et modifier des mod\u00e8les d'e-mails en ligne sans aucune comp\u00e9tence en codage! Comprend plus de 100 composants pour vous aider \u00e0 cr\u00e9er des mod\u00e8les d'e-mails personnalis\u00e9s plus rapidement que jamais.\n<\/p>\n <a target=\"_blank\" class=\"button big rounded blue margin-top-2 ae-5\" href=\"https:\/\/designmodo.com\/postcards\/\" data-wpel-link=\"internal\" rel=\"noopener\">Essayer gratuitement<\/a><a target=\"_blank\" class=\"button big transparent no-shadow flat text-blue margin-top-2 ae-6\" href=\"https:\/\/designmodo.com\/products\/\" data-wpel-link=\"internal\" rel=\"noopener\">Autres produits<\/a>\n <\/div>\n<\/div><\/div>\n<h2><span id=\"how-it-works\">Comment \u00e7a fonctionne<\/span>\n<\/h2>\n<p>Bootstrap 5 est livr\u00e9 avec des styles de validation tr\u00e8s faciles \u00e0 utiliser mais puissants pour les champs de saisie. Ces styles de validation sont utilis\u00e9s pour pr\u00e9senter certains styles de formulaire et messages, \u00e0 la fois des erreurs et des \u00e9tats de r\u00e9ussite pour les champs de formulaire, et peuvent \u00eatre d\u00e9clench\u00e9s lorsque vous soumettez le formulaire r\u00e9el.<\/p>\n<h3><span id=\"supported-html-elements\">\u00c9l\u00e9ments HTML pris en charge<\/span>\n<\/h3>\n<p>Les styles de validation Bootstrap 5 peuvent \u00eatre utilis\u00e9s sur les \u00e9l\u00e9ments HTML suivants, y compris jusqu'\u00e0 un <strong>.form-control<\/strong> classe dans les groupes d'entr\u00e9e.<\/p>\n<ul><li><strong><entr\u00e9e><\/strong><\/li>\n<li><strong><select><\/strong><\/li>\n<li><strong><textarea><\/strong><\/li>\n<\/ul><p>Pour l'\u00e9l\u00e9ment d'entr\u00e9e, vous pouvez utiliser les styles de validation Bootstrap 5 sur les balises couramment utilis\u00e9es telles que la zone de texte, le bouton radio, la case \u00e0 cocher et la balise d'\u00e9l\u00e9ment de fichier.<\/p>\n<p>La validation du formulaire Bootstrap 5 a essentiellement deux \u00e9tats: <strong>Erreur<\/strong> et <strong>Succ\u00e8s<\/strong>. Celles-ci sont repr\u00e9sent\u00e9es par les classes s\u00e9mantiques suivantes.<\/p>\n<ul><li><strong>.is-invalid: Erreur<\/strong><\/li>\n<li><strong>.is-valid: succ\u00e8s<\/strong><\/li>\n<\/ul><p>Jetons un coup d'\u0153il au code pour rendre ces deux \u00e9tats de validation:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\"> \n<div class=\"col-md-4\"> \n <label for=\"validationSuccess\" class=\"form-label text-success\">Input with success<\/label> \n <input type=\"text\" class=\"form-control is-valid\" id=\"validationSuccess\" required> \n<\/div> \n<div class=\"col-md-4\"> \n <label for=\"validationError\" class=\"form-label text-danger\">Input with error<\/label> \n <input type=\"text\" class=\"form-control is-invalid\" id=\"validationError\" required> \n<\/div> \n<\/pre>\n<p>Le balisage que vous voyez ci-dessus est tr\u00e8s similaire aux entr\u00e9es habituelles avec l'ajout de quelques classes CSS pour appliquer l'apparence et la convivialit\u00e9 de l'\u00e9tat.<\/p>\n<p>Passons en revue le code dont vous devez \u00eatre conscient:<\/p>\n<ul><li>La premi\u00e8re entr\u00e9e est l'\u00e9tat de r\u00e9ussite. Le champ de saisie doit avoir une classe appel\u00e9e <strong>.est valable <\/strong>ajout\u00e9 \u00e0 lui.<\/li>\n<li>La deuxi\u00e8me entr\u00e9e est l'\u00e9tat d'erreur. Le champ de saisie doit avoir une classe appel\u00e9e <strong>.est invalide<\/strong> ajout\u00e9 \u00e0 lui.<\/li>\n<li>Notez que chaque entr\u00e9e a une ic\u00f4ne sur le bord droit de celle-ci. Ces ic\u00f4nes sont automatiquement ajout\u00e9es lorsque vous incluez les fichiers CSS d'amor\u00e7age requis.<\/li>\n<li>Chaque <strong><label><\/strong> la balise a une classe <strong>.text-success <\/strong>et <strong>.text-danger<\/strong> ajout\u00e9 \u00e0 lui. Celles-ci ne sont pas requises dans la validation du formulaire, mais elles sont uniquement \u00e0 des fins de d\u00e9monstration pour colorer l'\u00e9tiquette afin qu'elle corresponde \u00e0 la couleur de l'\u00e9tat.<\/li>\n<\/ul><p>Jetons un coup d'\u0153il \u00e0 ce \u00e0 quoi ces entr\u00e9es de validation devraient ressembler dans le navigateur:<\/p>\n<figure id=\"attachment_620839\" class=\"alignleft\"><img loading=\"lazy\" class=\"size-full wp-image-620839\" src=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image1.png\" alt=\"Comment valider des formulaires avec Bootstrap 5\" width=\"531\" height=\"229\" srcset=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image1.png 531w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image1-5x3.png 5w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image1-300x129.png 300w\" sizes=\"(max-width: 531px) 100vw, 531px\"\/><\/figure><p>Ensuite, voyons comment les messages de validation de formulaire fonctionnent avec la validation de formulaire Bootstrap 5 \u00e0 un niveau tr\u00e8s basique. La validation de formulaire Bootstrap 5 fournit \u00e9galement deux \u00e9tats pour les messages de validation de formulaire similaires \u00e0 la validation d'entr\u00e9e ci-dessus: <strong>Erreur<\/strong> et <strong>Succ\u00e8s<\/strong>.<\/p>\n<p>Celles-ci sont repr\u00e9sent\u00e9es par les classes s\u00e9mantiques suivantes.<\/p>\n<ul><li><strong>.invalid-feedback: Erreur<\/strong><\/li>\n<li><strong>.valid-feedback: succ\u00e8s<\/strong><\/li>\n<\/ul><p>Jetons un coup d'\u0153il au code pour rendre ces deux \u00e9tats de messages de validation:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\"> \n<div class=\"col-md-4\"> \n <label for=\"validationSuccess\" class=\"form-label text-success\">Input with success<\/label> \n <input type=\"text\" class=\"form-control is-valid\" id=\"validationSuccess\" required> \n <div class=\"valid-feedback\"> \n This is a success state form validation message! \n <\/div> \n<\/div> \n<div class=\"col-md-4\"> \n<label for=\"validationError\" class=\"form-label text-danger\">Input with error<\/label> \n<input type=\"text\" class=\"form-control is-invalid\" id=\"validationError\" required> \n<div class=\"invalid-feedback\"> \n This is an error state form validation message! \n<\/div> \n<\/pre>\n<p>Passons en revue le code dont vous devez \u00eatre conscient:<\/p>\n<ul><li>Le div avec une classe <strong>.valid-feedback<\/strong> est le message de validation du formulaire <strong>Succ\u00e8s.<\/strong>\n<\/li>\n<li>Le div avec une classe.<strong>r\u00e9troaction invalide<\/strong> est le message de validation du formulaire <strong>Erreur.<\/strong>\n<\/li>\n<li>Chaque classe indiqu\u00e9e ci-dessus doit \u00eatre utilis\u00e9e ensemble sous le champ de saisie, puis bootstrap \u00e0 l'aide de JavaScript d\u00e9terminera celle \u00e0 afficher en fonction de l'entr\u00e9e de l'utilisateur lors de la soumission du formulaire. Plus d'informations \u00e0 ce sujet plus tard.<\/li>\n<\/ul><p>Jetons un coup d'\u0153il \u00e0 ce \u00e0 quoi ces entr\u00e9es de validation devraient ressembler dans le navigateur:<\/p>\n<figure id=\"attachment_620840\" class=\"alignleft\"><img loading=\"lazy\" class=\"size-full wp-image-620840\" src=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image4.png\" alt=\"Validation du formulaire Bootstrap\" width=\"532\" height=\"297\" srcset=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image4.png 532w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image4-5x3.png 5w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image4-522x292.png 522w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image4-300x167.png 300w\" sizes=\"(max-width: 532px) 100vw, 532px\"\/><\/figure><p>Comme vu ci-dessus, les entr\u00e9es et les messages de validation de formulaire sont color\u00e9s pour correspondre \u00e0 leur \u00e9tat. De plus, notez que nous avons utilis\u00e9 <strong>.est valable<\/strong> et <strong>.est invalide<\/strong> pour correspondre \u00e0 l'\u00e9tat pour une validation particuli\u00e8re.<\/p>\n<p>Cependant, avec Bootstrap et l'utilisation de JavaScript lors de la soumission du formulaire, vous n'avez pas besoin de mettre imp\u00e9rativement ces deux classes sur chaque champ de donn\u00e9es. Bootstrap le g\u00e9rera pour vous en cons\u00e9quence. La validation du formulaire Bootstrap est appliqu\u00e9e \u00e0 l'aide des deux pseudo-classes de CSS, <strong>:valide<\/strong> et<strong>:invalide<\/strong>. Bootstrap a examin\u00e9 les styles de ces classes qui sont g\u00e9n\u00e9ralement appliqu\u00e9s avec l'utilisation de <strong>.a \u00e9t\u00e9 valid\u00e9<\/strong> classe dans le <strong><form><\/strong> \u00e9tiqueter. Le <strong>.est valable <\/strong>et <strong>.est invalide<\/strong> les classes peuvent toujours \u00eatre utilis\u00e9es \u00e0 la place des pseudo-classes pour la validation c\u00f4t\u00e9 serveur. Veuillez noter que si vous utilisez ces classes lors de la validation c\u00f4t\u00e9 serveur, vous n'avez pas besoin d'ajouter <strong>.a \u00e9t\u00e9 valid\u00e9<\/strong> classer.<\/p>\n<h3><span id=\"validation-style-using-tooltips\">Style de validation \u00e0 l'aide des info-bulles<\/span>\n<\/h3>\n<p>Bootstrap est \u00e9galement livr\u00e9 avec des styles d'info-bulles pour ses styles de validation contemporains. L'info-bulle ou info-bulle est un \u00e9l\u00e9ment d'interface utilisateur courant o\u00f9, en survolant un \u00e9l\u00e9ment, une bo\u00eete contextuelle affiche les informations requises pour cet \u00e9l\u00e9ment sp\u00e9cifique, mais dans ce cas, il s'agirait du message de validation.<\/p>\n<p>Pour que la fonction de validation des info-bulles fonctionne, vous devez utiliser <strong>.valid-tooltip<\/strong> ou <strong>.invalid-tooltip<\/strong> classe pour correspondre \u00e0 l'\u00e9tat d'un style de validation particulier et d'un message de validation de formulaire au lieu d'utiliser <strong>.valid-feedback<\/strong> et <strong>.invalid-feedback<\/strong>. De plus, vous devez avoir un \u00e9l\u00e9ment parent avec <strong>position: relative<\/strong> style pour le positionnement des info-bulles.<\/p>\n<p>Le code ci-dessous est identique au code ci-dessus, mais cette fois en utilisant une info-bulle car il s'agit d'un style de validation contemporain.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\"> \n<div class=\"col-md-4 position-relative\"> \n <label for=\"validationSuccess\" class=\"form-label text-success\">Input with success<\/label> \n <input type=\"text\" class=\"form-control\" value=\"Samuel Norton\" required> \n <div class=\"valid-tooltip\"> \n This is a success state form validation message! \n <\/div> \n<\/div> \n<div class=\"col-md-4 position-relative\"> \n <label for=\"validationError\" class=\"form-label text-danger\">Input with error<\/label> \n <input type=\"text\" class=\"form-control\" id=\"validationError\" required> \n <div class=\"invalid-tooltip\"> \n This is an error state form validation message! \n <\/div> \n<\/div> \n<\/pre>\n<p>Jetons un coup d'\u0153il \u00e0 ce \u00e0 quoi ces entr\u00e9es de validation devraient ressembler dans le navigateur:<\/p>\n<figure id=\"attachment_620842\" class=\"alignleft\"><img loading=\"lazy\" class=\"size-full wp-image-620842\" src=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image3.png\" alt=\"Validation JavaScript\" width=\"539\" height=\"306\" srcset=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image3.png 539w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image3-5x3.png 5w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image3-300x170.png 300w\" sizes=\"(max-width: 539px) 100vw, 539px\"\/><\/figure><h3><span id=\"using-javascript\">Utilisation de JavaScript<\/span>\n<\/h3>\n<p>Voyons maintenant comment JavaScript peut aider nos styles de validation bootstrap \u00e0 emp\u00eacher toute soumission invalide de la part des utilisateurs.<\/p>\n<p>Tout d'abord, jetez un \u0153il au balisage suivant:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\"> \n<form class=\"row g-3 requires-validation\" novalidate> \n <div class=\"col-md-12\"> \n <label for=\"username\" class=\"form-label\">Username:<\/label> \n <input type=\"text\" class=\"form-control\" id=\"username\" required> \n <div class=\"valid-feedback\"> \n Username looks good! \n <\/div> \n <div class=\"invalid-feedback\"> \n Username is required! \n <\/div> \n <\/div> \n <div class=\"col-md-12\"> \n <label for=\"password\" class=\"form-label\">Password:<\/label> \n <input type=\"text\" class=\"form-control\" id=\"password\" required> \n <div class=\"valid-feedback\"> \n Password looks good! \n <\/div> \n <div class=\"invalid-feedback\"> \n Password is required! \n <\/div> \n <\/div> \n <div class=\"col-12\"> \n <button class=\"btn btn-primary\" type=\"submit\">Login<\/button> \n <\/div> \n<\/form> \n<\/pre>\n<p>Regardons de plus pr\u00e8s le balisage ci-dessus:<\/p>\n<ul><li>La balise form a un <strong>novalidate<\/strong> attribut bool\u00e9en. Cela emp\u00eache les info-bulles de commentaires par d\u00e9faut du navigateur sans l'occlusion de l'acc\u00e8s aux API de validation de formulaire dans JavaScript.<\/li>\n<li>Nous n'avons pas inclus le <strong>.est valable<\/strong> et <strong>.est invalide<\/strong> classes sur chaque champ de donn\u00e9es. Sangles de botte <strong>:invalide<\/strong> et <strong>:valide<\/strong> styles l'appliquera aux contr\u00f4les de formulaire avec l'utilisation de JavaScript.<\/li>\n<li>Nous avons ajout\u00e9 un <strong>.requires-validation<\/strong> classe \u00e0 l'int\u00e9rieur de la balise form. Ce n'est pas une classe s\u00e9mantique de bootstrap. Vous pouvez le renommer avec le nom de classe que vous pr\u00e9f\u00e9rez. Le but de cette classe est d'aider JavaScript \u00e0 r\u00e9cup\u00e9rer tous les \u00e9l\u00e9ments du formulaire pour appliquer des styles de validation d'amor\u00e7age personnalis\u00e9s en cons\u00e9quence (plus d'informations \u00e0 ce sujet plus tard).<\/li>\n<li>Sur chaque champ de donn\u00e9es ou entr\u00e9es, nous avons ajout\u00e9 le <strong>obligatoire<\/strong> attribut \u00e0 la fin. Cela indique simplement qu'un champ de donn\u00e9es particulier doit \u00eatre rempli avant de soumettre le formulaire.<\/li>\n<li>Encore une fois, nous utilisons <strong>.valid-feedback<\/strong> et <strong>.invalid-feedback<\/strong> au bas de chaque champ de donn\u00e9es. Le div avec une classe <strong>.valid-feedback<\/strong> est le message de validation du formulaire <strong>Succ\u00e8s<\/strong> O\u00f9, le div avec une classe <strong>.invalid-feedback<\/strong> est le message de validation du formulaire <strong>Erreur<\/strong> Etat.<\/li>\n<\/ul><p>Ensuite, ajoutons le code JavaScript pour d\u00e9sactiver les soumissions de formulaire s'il y a des champs non valides lorsque l'utilisateur soumet le formulaire:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\"> \n<script> \n(function () { \n'use strict' \nconst forms = document.querySelectorAll('.requires-validation') \nArray.from(forms) \n .forEach(function (form) { \n form.addEventListener('submit', function (event) { \n \tif (!form.checkValidity()) { \n event.preventDefault() \n event.stopPropagation() \n \t} \n \n form.classList.add('was-validated') \n\t}, false) \n }) \n})() \n<\/script> \n<\/pre>\n<p>Le code JavaScript ci-dessus obtient simplement tous les formulaires via <strong>querySelectorAll<\/strong> et retourne une NodeList statique qui repr\u00e9sente une liste des \u00e9l\u00e9ments du document \u00e0 l'aide de la <strong>.requires-validation<\/strong> classer.<\/p>\n<p>Ensuite, pour chacun des formulaires trouv\u00e9s, le code JavaScript ajoutera un <strong>EventListener<\/strong> qui sera appel\u00e9 chaque fois que l'\u00e9v\u00e9nement sp\u00e9cifi\u00e9 est livr\u00e9 et qui est soumis. Ainsi, chaque fois qu'un utilisateur soumet le formulaire, <strong>form.checkValidity () <\/strong>sera appel\u00e9. Cette m\u00e9thode v\u00e9rifie si le champ de donn\u00e9es a des contraintes et remplit les contraintes donn\u00e9es. En cas d'\u00e9chec, le navigateur d\u00e9clenche simplement un \u00e9v\u00e9nement invalide et renvoie false.<\/p>\n<p>Donc, en cas d'\u00e9chec, il appellera les deux m\u00e9thodes JavaScript suivantes:<\/p>\n<ul><li>\n<strong>preventDefault ()<\/strong> - une m\u00e9thode qui emp\u00eachera simplement l'\u00e9v\u00e9nement par d\u00e9faut d'\u00eatre pris comme il le serait normalement. Dans ce cas, la soumission du formulaire.<\/li>\n<li>\n<strong>stopPropagation ()<\/strong> - une m\u00e9thode qui emp\u00eache la poursuite de la propagation (bouillonnement) de l'\u00e9v\u00e9nement en cours.<\/li>\n<\/ul><p>Enfin, il ajoutera <strong>.a \u00e9t\u00e9 valid\u00e9<\/strong> classe dans la balise form pour afficher l'\u00e9tat de validation du formulaire et les messages.<\/p>\n<p>Bootstrap couvre le <strong>:invalide<\/strong> et <strong>:valide<\/strong> styles \u00e0 parent <strong>.a \u00e9t\u00e9 valid\u00e9<\/strong> classe lorsqu'elle est appliqu\u00e9e au formulaire. Vous pouvez r\u00e9ellement mettre le <strong>.a \u00e9t\u00e9 valid\u00e9<\/strong> classe \u00e0 la balise de formulaire m\u00eame sans l'aide de JavaScript, mais qui affichera automatiquement les \u00e9tats de validation du formulaire et les messages avant m\u00eame que l'utilisateur ne soumette le formulaire. Cependant, avoir JavaScript pour s'occuper de l'\u00e9v\u00e9nement de soumission et de validation du formulaire vous donnera un processus de validation contemporain plus s\u00e9curis\u00e9 c\u00f4t\u00e9 client.<\/p>\n<p>Voyons \u00e0 quoi cela devrait ressembler dans le navigateur:<\/p>\n<figure id=\"attachment_620843\" class=\"alignleft\"><img loading=\"lazy\" class=\"size-full wp-image-620843\" src=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image2.png\" alt=\"Code JavaScript\" width=\"527\" height=\"334\" srcset=\"https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image2.png 527w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image2-5x3.png 5w, https:\/\/designmodo.com\/wp-content\/uploads\/2021\/03\/image2-300x190.png 300w\" sizes=\"(max-width: 527px) 100vw, 527px\"\/><\/figure><h3><span id=\"putting-it-all-together\">Mettre tous ensemble<\/span>\n<\/h3>\n<p>Maintenant, pour mettre tout cela ensemble, cr\u00e9ons une page d'inscription simple et voyons comment nous pouvons appliquer les styles de validation contemporains de Bootstrap 5 sur chaque champ de donn\u00e9es.<\/p>\n<p>Ci-dessous le balisage.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\"> \n<div class=\"form-body\"> \n <div class=\"row\"> \n <div class=\"form-holder\"> \n <div class=\"form-content\"> \n <div class=\"form-items\"> \n <h3>Register Today<\/h3> \n <p>Fill in the data below.<\/p> \n <form class=\"requires-validation\" novalidate> \n <div class=\"col-md-12\"> \n <input class=\"form-control\" type=\"text\" name=\"name\" placeholder=\"Full Name\" required> \n <div class=\"valid-feedback\">Username field is valid!<\/div> \n <div class=\"invalid-feedback\">Username field cannot be blank!<\/div> \n <\/div> \n <div class=\"col-md-12\"> \n <input class=\"form-control\" type=\"email\" name=\"email\" placeholder=\"E-mail Address\" required> \n <div class=\"valid-feedback\">Email field is valid!<\/div> \n <div class=\"invalid-feedback\">Email field cannot be blank!<\/div> \n <\/div> \n <div class=\"col-md-12\"> \n <select class=\"form-select mt-3\" required> \n <option selected disabled value=\"\">Position<\/option> \n <option value=\"jweb\">Junior Web Developer<\/option> \n <option value=\"sweb\">Senior Web Developer<\/option> \n <option value=\"pmanager\">Project Manager<\/option> \n <\/select> \n <div class=\"valid-feedback\">You selected a position!<\/div> \n <div class=\"invalid-feedback\">Please select a position!<\/div> \n <\/div> \n <div class=\"col-md-12\"> \n <input class=\"form-control\" type=\"password\" name=\"password\" placeholder=\"Password\" required> \n <div class=\"valid-feedback\">Password field is valid!<\/div> \n <div class=\"invalid-feedback\">Password field cannot be blank!<\/div> \n <\/div> \n <div class=\"col-md-12 mt-3\"> \n <label class=\"mb-3 mr-1\" for=\"gender\">Gender: <\/label> \n <input type=\"radio\" class=\"btn-check\" name=\"gender\" id=\"male\" autocomplete=\"off\" required> \n <label class=\"btn btn-sm btn-outline-secondary\" for=\"male\">Male<\/label> \n <input type=\"radio\" class=\"btn-check\" name=\"gender\" id=\"female\" autocomplete=\"off\" required> \n <label class=\"btn btn-sm btn-outline-secondary\" for=\"female\">Female<\/label> \n <input type=\"radio\" class=\"btn-check\" name=\"gender\" id=\"secret\" autocomplete=\"off\" required> \n <label class=\"btn btn-sm btn-outline-secondary\" for=\"secret\">Secret<\/label> \n <div class=\"valid-feedback mv-up\">You selected a gender!<\/div> \n <div class=\"invalid-feedback mv-up\">Please select a gender!<\/div> \n <\/div> \n <div class=\"form-check\"> \n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"invalidCheck\" required> \n <label class=\"form-check-label\">I confirm that all data are correct<\/label> \n <div class=\"invalid-feedback\">Please confirm that the entered data are all correct!<\/div> \n <\/div> \n <div class=\"form-button mt-3\"> \n <button id=\"submit\" type=\"submit\" class=\"btn btn-primary\">Register<\/button> \n <\/div> \n <\/form> \n <\/div> \n <\/div> \n <\/div> \n <\/div> \n<\/div> \n<\/pre>\n<p>Ensuite, j'ai ajout\u00e9 CSS pour personnaliser l'apparence de notre formulaire.<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\"> \n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;700;900&display=swap'); \n*, \nbody { \n\tfont-family: 'Poppins', sans-serif; \n\tfont-weight: 400; \n\t-webkit-font-smoothing: antialiased; \n\ttext-rendering: optimizeLegibility; \n\t-moz-osx-font-smoothing: grayscale; \n} \n \nhtml, \nbody { \n\theight: 100%; \n\tbackground-color: #152733; \n\toverflow: hidden; \n} \n \n.form-holder { \n\tdisplay: flex; \n\tflex-direction: column; \n\tjustify-content: center; \n\talign-items: center; \n\ttext-align: center; \n\tmin-height: 100vh; \n} \n \n.form-holder .form-content { \n\tposition: relative; \n\ttext-align: center; \n\tdisplay: -webkit-box; \n\tdisplay: -moz-box; \n\tdisplay: -ms-flexbox; \n\tdisplay: -webkit-flex; \n\tdisplay: flex; \n\t-webkit-justify-content: center; \n\tjustify-content: center; \n\t-webkit-align-items: center; \n\talign-items: center; \n\tpadding: 60px; \n} \n \n.form-content .form-items { \n\tborder: 3px solid #fff; \n\tpadding: 40px; \n\tdisplay: inline-block; \n\twidth: 100%; \n\tmin-width: 540px; \n\t-webkit-border-radius: 10px; \n\t-moz-border-radius: 10px; \n\tborder-radius: 10px; \n\ttext-align: left; \n\t-webkit-transition: all 0.4s ease; \n\ttransition: all 0.4s ease; \n} \n \n.form-content h3 { \n\tcolor: #fff; \n\ttext-align: left; \n\tfont-size: 28px; \n\tfont-weight: 600; \n\tmargin-bottom: 5px; \n} \n \n.form-content h3.form-title { \n\tmargin-bottom: 30px; \n} \n \n.form-content p { \n\tcolor: #fff; \n\ttext-align: left; \n\tfont-size: 17px; \n\tfont-weight: 300; \n\tline-height: 20px; \n\tmargin-bottom: 30px; \n} \n \n.form-content label, \n.was-validated .form-check-input:invalid~.form-check-label, \n.was-validated .form-check-input:valid~.form-check-label { \n\tcolor: #fff; \n} \n \n.form-content input[type=text], \n.form-content input[type=password], \n.form-content input[type=email], \n.form-content select { \n\twidth: 100%; \n\tpadding: 9px 20px; \n\ttext-align: left; \n\tborder: 0; \n\toutline: 0; \n\tborder-radius: 6px; \n\tbackground-color: #fff; \n\tfont-size: 15px; \n\tfont-weight: 300; \n\tcolor: #8D8D8D; \n\t-webkit-transition: all 0.3s ease; \n\ttransition: all 0.3s ease; \n\tmargin-top: 16px; \n} \n \n.btn-primary { \n\tbackground-color: #6C757D; \n\toutline: none; \n\tborder: 0px; \n\tbox-shadow: none; \n} \n \n.btn-primary:hover, \n.btn-primary:focus, \n.btn-primary:active { \n\tbackground-color: #495056; \n\toutline: none !important; \n\tborder: none !important; \n\tbox-shadow: none; \n} \n \n.form-content textarea { \n\tposition: static !important; \n\twidth: 100%; \n\tpadding: 8px 20px; \n\tborder-radius: 6px; \n\ttext-align: left; \n\tbackground-color: #fff; \n\tborder: 0; \n\tfont-size: 15px; \n\tfont-weight: 300; \n\tcolor: #8D8D8D; \n\toutline: none; \n\tresize: none; \n\theight: 120px; \n\t-webkit-transition: none; \n\ttransition: none; \n\tmargin-bottom: 14px; \n} \n \n.form-content textarea:hover, \n.form-content textarea:focus { \n\tborder: 0; \n\tbackground-color: #ebeff8; \n\tcolor: #8D8D8D; \n} \n \n.mv-up { \n\tmargin-top: -9px !important; \n\tmargin-bottom: 8px !important; \n} \n \n.invalid-feedback { \n\tcolor: #ff606e; \n} \n \n.valid-feedback { \n\tcolor: #2acc80; \n} \n<\/pre>\n<p>Enfin, nous utiliserons le m\u00eame code JavaScript ci-dessus pour emp\u00eacher l'utilisateur de soumettre des champs vides ainsi que pour afficher les \u00e9tats de validation et les styles de message de validation de formulaire.<\/p>\n<p>J'ai compil\u00e9 le code ci-dessous sur Codepen. N'h\u00e9sitez pas \u00e0 le modifier et \u00e0 jouer.<\/p>\n<p class=\"codepen\" data-height=\"665\" data-theme-id=\"dark\" data-default-tab=\"html,result\" data-user=\"samnorton\" data-slug-hash=\"oNYajYM\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Registration Form (Bootstrap 5 Validation)\">\n <span>Voir le stylo <a target=\"_blank\" href=\"https:\/\/codepen.io\/samnorton\/pen\/oNYajYM\" data-wpel-link=\"external\" rel=\"nofollow noopener\"><br\/>Formulaire d'inscription (validation Bootstrap 5)<\/a> par Sam Norton (<a target=\"_blank\" href=\"https:\/\/codepen.io\/samnorton\" data-wpel-link=\"external\" rel=\"nofollow noopener\">@samnorton<\/a>)<br\/>sur <a target=\"_blank\" href=\"https:\/\/codepen.io\" data-wpel-link=\"external\" rel=\"nofollow noopener\">CodePen<\/a>.<\/span>\n<\/p>\n\n<h2><span id=\"wrapping-up\">Emballer<\/span>\n<\/h2>\n<p>La cr\u00e9ation de sites Web et m\u00eame d'applications aujourd'hui est beaucoup plus difficile et prend du temps qu'auparavant. L'utilisation des m\u00e9thodes et des styles de validation contemporains de Bootstrap 5 vous fournira un moyen simple, mais des commentaires pr\u00e9cieux et exploitables \u00e0 vos utilisateurs pr\u00eats \u00e0 l'emploi sans trop vous soucier des styles.<\/p>\n<p>La meilleure partie est que vous pouvez toujours personnaliser le message de validation du formulaire, y compris les styles \u00e0 votre go\u00fbt sans r\u00e9inventer la roue.<\/p>\n\n<div class=\"block-bottom\"><div class=\"fix-8-12 subscribe-form ae-1\" style=\"background:linear-gradient(-45deg, #0982a7,hsla(218, 100%, 26%, 1));\">\n <h5 class=\"small margin-bottom-2\">Vous aimez ce que vous lisez? Abonnez-vous \u00e0 nos meilleures histoires.<\/h5>\n \n<\/div><\/div>\n\t\t\t\t\t<\/div>\r\n<br>[ad_2]\r\n\r\n<br> -- to <a href=\"https:\/\/designmodo.com\/validate-forms-bootstrap\/ \">designmodo.com <\/a>","author":{"@type":"Person","name":"admin237","url":"https:\/\/mycamer.net\/author\/admin237\/","sameAs":["https:\/\/mycamer.net"]},"articleSection":["Language HTML5"],"image":{"@type":"ImageObject","url":"https:\/\/mycamer.net\/wp-content\/uploads\/2021\/03\/Validate-Forms-Bootstrap-1-620837-preview.jpg","width":1200,"height":630},"publisher":{"@type":"Organization","name":"","url":"https:\/\/mycamer.net","logo":{"@type":"ImageObject","url":""},"sameAs":["https:\/\/www.facebook.com\/jegtheme\/","https:\/\/twitter.com\/jegtheme","http:\/\/youtube.com\/","http:\/\/vimeo.com","http:\/\/instagram.com"]}}</script> <script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"hentry","entry-title":"Comment valider des formulaires avec Bootstrap 5","published":"2021-03-11 05:18:36","updated":"2021-03-11 05:18:36"}</script> <script type='application/ld+json'>{"@context":"http:\/\/schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/mycamer.net","name":"Home"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/mycamer.net\/news\/developpement-web\/","name":"Developpement web"}},{"@type":"ListItem","position":3,"item":{"@id":"https:\/\/mycamer.net\/news\/developpement-web\/language-html5\/","name":"Language HTML5"}},{"@type":"ListItem","position":4,"item":{"@id":"https:\/\/mycamer.net","name":"Home"}},{"@type":"ListItem","position":5,"item":{"@id":"https:\/\/mycamer.net\/news\/developpement-web\/","name":"Developpement web"}},{"@type":"ListItem","position":6,"item":{"@id":"https:\/\/mycamer.net\/news\/developpement-web\/language-html5\/","name":"Language HTML5"}}]}</script> <script type="text/javascript">;!function(){"use strict";window.jnews=window.jnews||{},window.jnews.first_load=window.jnews.first_load||{},window.jnews.first_load=function(){var e=this,t=jnews.library,n="object"==typeof jnews&&"object"==typeof jnews.library;e.data=null,e.run_ajax=!0,e.run_loginregister=!0,e.clear=function(){e.run_ajax=!0,e.run_loginregister=!0,e.data=null},e.init=function(){n&&(t.globalBody.querySelectorAll(".jeg_popup_account").length&&jnews.loginregister&&e.run_loginregister&&(e.run_loginregister=!1,jnews.loginregister.init(),jnews.loginregister.hook_form()),jfla.length&&e.run_ajax&&(e.run_ajax=!1,e.do_ajax({action:"jnews_first_load_action",jnews_id:jnewsoption.postid,load_action:jfla})))},e.update_counter=function(){if(n){var o={total_view:t.globalBody.querySelectorAll(".jeg_share_stats .jeg_views_count .counts"),total_share:t.globalBody.querySelectorAll(".jeg_share_stats .jeg_share_count .counts"),total_comment:t.globalBody.querySelectorAll(".jeg_meta_comment a span")};t.forEach(e.data.counter,(function(e,n){o[n].length&&t.forEach(o[n],(function(n,o){t.setText(n,e)}))}))}},e.do_ajax=function(o){if(n){var a=new XMLHttpRequest;a.onreadystatechange=function(){XMLHttpRequest.DONE===a.readyState&&200==a.status&&(e.data=JSON.parse(a.responseText),e.data.counter&&"object"==typeof e.data.counter&&e.update_counter())},a.open("POST",jnews_ajax_url,!0),a.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8"),a.send(t.httpBuildQuery(o))}}},window.jnews.first_load=new window.jnews.first_load,jnews.first_load.init()}();</script></body> </html>