6.5 — Validation

⏱️ TL;DR — Deux approches : la validation native du navigateur (.needs-validation + novalidate + un peu de JS) qui colore les champs via les pseudo-classes CSS, et la validation serveur/manuelle où vous ajoutez .is-valid/.is-invalid vous-même. Les messages vont dans .valid-feedback/.invalid-feedback.

🎯 Objectifs

• Colorer les champs selon leur validité.
• Afficher des messages de feedback.
• Choisir entre validation native et manuelle.

Validation manuelle (états explicites)

<div class="mb-3">
  <label class="form-label">E-mail</label>
  <input class="form-control is-invalid" value="pas-un-email">
  <div class="invalid-feedback">Adresse e-mail invalide.</div>
</div>
 
<div class="mb-3">
  <label class="form-label">Pseudo</label>
  <input class="form-control is-valid" value="alex">
  <div class="valid-feedback">Parfait !</div>
</div>

Vous contrôlez tout : ajoutez is-invalid (rouge) ou is-valid (vert) selon votre logique (souvent après une validation serveur). C’est l’approche idéale en React.

Validation native du navigateur

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label class="form-label">Nom</label>
    <input class="form-control" required>
    <div class="invalid-feedback">Le nom est requis.</div>
  </div>
  <button class="btn btn-primary" type="submit">Envoyer</button>
</form>

// à la soumission, on active l'affichage des états
document.querySelectorAll('.needs-validation').forEach(form => {
  form.addEventListener('submit', e => {
    if (!form.checkValidity()) {
      e.preventDefault(); e.stopPropagation()
    }
    form.classList.add('was-validated')
  })
})

novalidate désactive les bulles natives ; was-validated déclenche le style Bootstrap basé sur les pseudo-classes :valid/:invalid. Les contraintes viennent des attributs HTML (required, type="email", pattern, min…).

Feedback en tooltip

Remplacez .invalid-feedback par .invalid-tooltip (dans un parent position-relative) pour un message flottant.

⚠️ Piège — Sans novalidate, le navigateur affiche ses propres bulles d’erreur en plus de Bootstrap. Mettez novalidate sur le <form> pour ne garder que le style Bootstrap.

💡 Pour un dev React — N’utilisez pas checkValidity/was-validated : gérez la validité par l’état (souvent avec React Hook Form + un schéma Zod) et appliquez conditionnellement is-invalid + un <div className="invalid-feedback">{error}</div>. Vous gardez le style Bootstrap et une logique React idiomatique.

✏️ Exercices

1. Marquer un champ comme invalide avec un message, sans JS.

<input class="form-control is-invalid">
<div class="invalid-feedback">Message d'erreur.</div>

2. Pourquoi mettre novalidate sur un formulaire à validation Bootstrap native ?

🧠 Quiz de révision

🎉 Fin de la Partie 6 ! Partie suivante : Partie 7 — Utilitaires & Utility API