Bootstrap5 Validation de formulaire
Nous pouvons utiliser différentes classes de validation pour configurer la fonctionnalité de validation de formulaire.
.was-validatedou.needs-validationUne fois ajoutées à l'élément <form>, les champs de saisie auront un effet de bordure verte (valide) ou rouge (invalide) pour indiquer si le formulaire nécessite une saisie.
.valid-feedbackou.invalid-feedbackLes classes sont utilisées pour indiquer aux utilisateurs quelles informations manquent, ou ce qui doit être complété avant de soumettre le formulaire.
Exemple
Utilisez la classe .was-validated pour montrer ce qui doit être rempli avant que le formulaire ne soit soumis :
<form action="" class="was-validated">
<div class="form-group">
<label for="uname">Nom d'utilisateur :</label>
<input type="text" class="form-control" id="uname" placeholder="Saisissez le nom d'utilisateur" name="uname" required>
<div class="valid-feedback">Vérification réussie !</div>
<div class="invalid-feedback">Veuillez saisir un nom d'utilisateur !</div>
</div>
<div class="form-group">
<label for="pwd">Mot de passe :</label>
<input type="password" class="form-control" id="pwd" placeholder="Saisissez le mot de passe" name="pswd" required>
<div class="valid-feedback">Vérification réussie !</div>
<div class="invalid-feedback">Veuillez saisir le mot de passe !</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required>Accepter l'accord<div class="valid-feedback">Vérification réussie !</div>
<div class="invalid-feedback">Vous devez accepter les conditions avant de soumettre.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</forme>
Essayez-le vous-même »
Exemple
Utilisez .needs-validation, qui validera le contenu manquant après la soumission du formulaire. Du code JavaScript doit être ajouté ici pour que le code fonctionne correctement :
<form action="" class="needs-validation" novalidate>
<div class="form-group">
<label for="uname">Nom d'utilisateur :</label>
<input type="text" class="form-control" id="uname" placeholder="Entrez le nom d'utilisateur" name="uname" required>
<div class="valid-feedback">Vérification réussie !</div>
<div class="invalid-feedback">Veuillez saisir un nom d'utilisateur !</div>
</div>
<div class="form-group">
<label for="pwd">Mot de passe :</label>
<input type="password" class="form-control" id="pwd" placeholder="Saisissez le mot de passe" name="pswd" required>
<div class="valid-feedback">Vérification réussie !</div>
<div class="invalid-feedback">Veuillez saisir le mot de passe !</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required>Accepter l'accord<div class="valid-feedback">Vérification réussie !</div>
<div class="invalid-feedback">Vous devez accepter les conditions avant de soumettre.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
<script>// Prevent form submission if validation fails
(function() {
'use strict';
window.addEventListener('load', function() {
// Get all forms with the validation class
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();</script>
Essayez-le vous-même » autres extensions