Validation des formulaires Bootstrap 5

Validation du formulaire

Vous pouvez utiliser différentes classes de validation pour fournir des retours utiles à l'utilisateur. Veuillez ajouter .was-validated ou .needs-validation ajouter à l'élément <form>, selon que vous souhaitez fournir des retours sur la validation avant ou après le soumission du formulaire. Les champs d'entrée auront une bordure verte (valide) ou rouge (non valide) pour indiquer ce qui manque dans le formulaire. Vous pouvez également ajouter .valid-feedback ou .invalid-feedback un message pour informer clairement l'utilisateur de ce qui manque ou ce qui doit être terminé avant de soumettre le formulaire.

Exemple

Dans cet exemple, nous utilisons avant de soumettre le formulaire .was-validated Indiquez ce qui manque :

<form action="/action_page.php" class="was-validated">
  <div class="mb-3 mt-3">
    <label for="uname" class="form-label">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">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">Mot de passe :</label>
    <input type="password" class="form-control" id="pwd" placeholder="Entrez le mot de passe" name="pswd" required>
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Veuillez remplir ce champ.</div>
  </div>
  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="myCheck" name="remember" required>
    <label class="form-check-label" for="myCheck">J'accepte ces termes.</label>
    <div class="valid-feedback">Valide.</div>
    <div class="invalid-feedback">Cochez cette case pour continuer.</div>
  </div>
  <button type="submit" class="btn btn-primary">Soumettre</button>
</form>

Essayer par vous-même