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.
Générateur de modèles d’e-mails en ligne
Avec Cartes postales vous pouvez créer et modifier des modèles d’e-mails en ligne sans aucune compétence en codage! Comprend plus de 100 composants pour vous aider à créer des modèles d’e-mails personnalisés plus rapidement que jamais.
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.
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.
La validation du formulaire Bootstrap 5 a essentiellement deux états: Erreur et Succès. Celles-ci sont représentées par les classes sémantiques suivantes.
- .is-invalid: Erreur
- .is-valid: succès
Jetons un coup d’œil au code pour rendre ces deux états de validation:
<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>
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.
Passons en revue le code dont vous devez être conscient:
- La première entrée est l’état de réussite. Le champ de saisie doit avoir une classe appelée .est valable ajouté à lui.
- La deuxième entrée est l’état d’erreur. Le champ de saisie doit avoir une classe appelée .est invalide ajouté à lui.
- 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.
- Chaque la balise a une classe .text-success et .text-danger 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.
Jetons un coup d’œil à ce à quoi ces entrées de validation devraient ressembler dans le navigateur:
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: Erreur et Succès.
Celles-ci sont représentées par les classes sémantiques suivantes.
- .invalid-feedback: Erreur
- .valid-feedback: succès
Jetons un coup d’œil au code pour rendre ces deux états de messages de validation:
<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>
Passons en revue le code dont vous devez être conscient:
- Le div avec une classe .valid-feedback est le message de validation du formulaire Succès.
- Le div avec une classe.rétroaction invalide est le message de validation du formulaire Erreur.
- 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.
Jetons un coup d’œil à ce à quoi ces entrées de validation devraient ressembler dans le navigateur:
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é .est valable et .est invalide pour correspondre à l’état pour une validation particulière.
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, :valide et:invalide. Bootstrap a examiné les styles de ces classes qui sont généralement appliqués avec l’utilisation de .a été validé classe dans le étiqueter. Le .est valable et .est invalide 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 .a été validé classer.
Style de validation à l’aide des info-bulles
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.
Pour que la fonction de validation des info-bulles fonctionne, vous devez utiliser .valid-tooltip ou .invalid-tooltip classe pour correspondre à l’état d’un style de validation particulier et d’un message de validation de formulaire au lieu d’utiliser .valid-feedback et .invalid-feedback. De plus, vous devez avoir un élément parent avec position: relative style pour le positionnement des info-bulles.
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.
<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>
Jetons un coup d’œil à ce à quoi ces entrées de validation devraient ressembler dans le navigateur:
Utilisation de JavaScript
Voyons maintenant comment JavaScript peut aider nos styles de validation bootstrap à empêcher toute soumission invalide de la part des utilisateurs.
Tout d’abord, jetez un œil au balisage suivant:
<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>
Regardons de plus près le balisage ci-dessus:
- La balise form a un novalidate 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.
- Nous n’avons pas inclus le .est valable et .est invalide classes sur chaque champ de données. Sangles de botte :invalide et :valide styles l’appliquera aux contrôles de formulaire avec l’utilisation de JavaScript.
- Nous avons ajouté un .requires-validation 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).
- Sur chaque champ de données ou entrées, nous avons ajouté le obligatoire attribut à la fin. Cela indique simplement qu’un champ de données particulier doit être rempli avant de soumettre le formulaire.
- Encore une fois, nous utilisons .valid-feedback et .invalid-feedback au bas de chaque champ de données. Le div avec une classe .valid-feedback est le message de validation du formulaire Succès Où, le div avec une classe .invalid-feedback est le message de validation du formulaire Erreur Etat.
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:
<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>
Le code JavaScript ci-dessus obtient simplement tous les formulaires via querySelectorAll et retourne une NodeList statique qui représente une liste des éléments du document à l’aide de la .requires-validation classer.
Ensuite, pour chacun des formulaires trouvés, le code JavaScript ajoutera un EventListener 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, form.checkValidity () 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.
Donc, en cas d’échec, il appellera les deux méthodes JavaScript suivantes:
- preventDefault () – 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.
- stopPropagation () – une méthode qui empêche la poursuite de la propagation (bouillonnement) de l’événement en cours.
Enfin, il ajoutera .a été validé classe dans la balise form pour afficher l’état de validation du formulaire et les messages.
Bootstrap couvre le :invalide et :valide styles à parent .a été validé classe lorsqu’elle est appliquée au formulaire. Vous pouvez réellement mettre le .a été validé 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.
Voyons à quoi cela devrait ressembler dans le navigateur:
Mettre tous ensemble
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.
Ci-dessous le balisage.
<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>
Ensuite, j’ai ajouté CSS pour personnaliser l’apparence de notre formulaire.
@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; }
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.
J’ai compilé le code ci-dessous sur Codepen. N’hésitez pas à le modifier et à jouer.
Voir le stylo
Formulaire d’inscription (validation Bootstrap 5) par Sam Norton (@samnorton)
sur CodePen.
Emballer
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.
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.
Vous aimez ce que vous lisez? Abonnez-vous à nos meilleures histoires.
— to designmodo.com