Introduction à la validation des formulaires Bootstrap
La validation est utilisée pour former l'acceptation avec certaines règles et réglementations. Bootstrap a de nombreuses classes pour construire un formulaire. Mais la validation nécessite des données de contrôle sur la forme. Dans cette rubrique, nous allons découvrir les types de validation de formulaire Bootstrap.
Par exemple, le formulaire a un mot de passe. Le mot de passe a de nombreuses règles en fonction des exigences. Quelqu'un a besoin de lettres, beaucoup ont besoin de chiffres, sinon, quelqu'un a besoin de caractères spéciaux. L'utilisateur connaît la satisfaction de l'exigence, la validation est importante.
Parfois, l'utilisateur n'obtient pas l'exigence exacte de forme ou le montant requis pour remplir, cette validation de temps est utile pour soumettre les données correctement. Si vous ne remplissez pas les spécifications, vous obtenez automatiquement les commentaires dans le formulaire.
Comment valider des formulaires avec Bootstrap?
- Le formulaire bootstrap permet à la validation de surmonter toutes les complications du codage JavaScript et de fonctionner facilement avec les classes.
- La validation du formulaire à trois bootstrap est accompagnée d'un glyphicon pour obtenir le message d'erreur, d'avertissement et de réussite. Les classes de validation sont toujours placées dans la classe parente.
- Parallèlement aux classes de validation, il nécessite également la classe has-feedback pour obtenir l'icône au bon endroit dans la zone de saisie du formulaire avec l'étiquette. Cette classe placée dans la classe parent.
Exemple:
La classe form-control-feedback était également nécessaire avec l'icône glyphicon pour définir l'icône dans la zone du formulaire de saisie.
Exemple:
Types de validation des formulaires Bootstrap
Il existe 3 types de formulaire Bootstrap comme mentionné ci-dessous:
1. a-succès
Cette classe avait l'habitude de transmettre le message de réussite. Avec cette classe de validation, les utilisateurs ont également besoin de l'icône «glyphicon glyphicon-ok» pour afficher l'icône du succès. Si l'utilisateur entre correctement l'entrée dans le formulaire, cette validation a fonctionné.
La classe has-success propose une classe parent. Pour obtenir le message de réussite à utiliser cette validation utilisée. L'exemple ci-dessous donne le format de formulaire horizontal. La sortie est accompagnée du message de couleur verte.
Syntaxe:
.
Exemple:
Paasword
Production:
2. a-avertissement
Cette classe utilisée pour les messages d'avertissement de saisie de formulaire. Avec cette classe de validation, les utilisateurs ont également besoin d'une icône «glyphicon glyphicon- warning-sign» pour afficher l'icône d'avertissement. Si nous saisissons la mauvaise entrée dans le formulaire, nous avons une chance de plus de saisir la validation de l'avertissement de temps.
Classe de validation d'avertissement placée dans la classe parent avec une classe has-feedback. Si l'utilisateur reçoit l'avertissement d'une sorte d'erreur, alors cette classe a fonctionné. Le résultat est accompagné du message de couleur jaune.
Syntaxe:
.
Exemple:
Paasword
Production:
3. a une erreur
Cette classe utilisée pour le message d'erreur de saisie de formulaire. Avec cette classe de validation, les utilisateurs ont également besoin de l'icône «glyphicon glyphicon-remove» pour afficher l'icône d'erreur. Si nous saisissons la mauvaise entrée dans le formulaire, cette validation a fonctionné.
Classe de validation d'erreur placée dans la classe parent avec une classe has-feedback. Si l'utilisateur reçoit le message d'erreur d'erreur, cette classe a fonctionné.
Syntaxe:
Exemple:
Paasword
Production:
Description: Tout le formulaire est une disposition horizontale. L'étiquette a 2 colonnes et l'entrée a 10 colonnes. Classe de validation définie avec has-feedback dans le div parent. Pour voir l’icône, l’utilisateur a utilisé des icônes de glyphicon avec formulaire-control-feedback dans le
Les utilisateurs travaillent sur le mot de passe. soit le mot de passe est correct, puis le travail de validation du succès, soit le mot de passe est incorrect, puis le travail de validation des erreurs. Si le mot de passe contient une erreur et que nous pouvons corriger, alors le travail de validation de l'avertissement.
Exemples de validation de formulaires Bootstrap
Voici les différents exemples de validation de formulaires bootstrap:
Exemple 1
L'exemple suivant est Validation avec le formulaire horizontal. Le signe Glyphicon est un travail sur la zone de saisie intérieure du formulaire. Étiquette et entrée sur une seule ligne horizontale, mais toutes les classes de groupe de formulaires sont placées verticalement.
Success
Warning
Error
Production:
Exemple # 2
L'exemple suivant est Validation avec le formulaire vertical. Dans la forme verticale, toutes les étiquettes et entrées sont situées verticalement. Le glyphicon peut être situé dans la ligne de l'étiquette à la fin de la zone de saisie.
Il n'y a pas de classe dans le formulaire. Il est rarement utilisé dans la validation de formulaire dans le bootstrap.
Success
Warning
Error
Production:
Exemple # 3
L'exemple suivant est Validation avec le formulaire en ligne. Le formulaire en ligne a toutes les étiquettes et entrées sur une seule ligne, y compris tous les groupes de formulaires. Il s'agit d'une icône compliquée mais de validation placée dans la zone de saisie du formulaire.
Si les utilisateurs n'ont besoin que d'un petit formulaire et d'un formulaire de connexion, alors avec les validations, le formulaire en ligne peut s'appliquer.
Success
Warning
Error
Production:
Par-dessus tout, l'exemple a tout type de validation avec toute la mise en page et comment cela fonctionne. Selon les exigences et la facilité d'utilisation, choisissez le format de validation et de mise en page du formulaire.
Conclusion
La validation du formulaire se produit principalement côté serveur pour contrôler les données du formulaire dans une base de données. À ces fins, nous obtenons de nombreux codages compliqués et en utilisant la méthode de validation en utilisant le langage JavaScript.
Bootstrap a tout fait sur une seule page de formulaire en évitant les complications et un long codage et en contrôlant les données du formulaire sans effort.
Articles recommandés
Ceci est un guide de validation de formulaire Bootstrap. Nous discutons ici des 3 types de validation des formulaires Bootstrap ainsi que des exemples appropriés. Vous pouvez également consulter l'article suivant.
- Disposition d'amorçage
- Composants d'amorçage
- Qu'est-ce que Bootstrap?
- Commandes d'amorçage
- Présentation du formulaire d'amorçage avec des exemples
- Formulaires en JavaScript | Programme de validation de formulaire