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
— to designmodo.com