Valider les formulaires Bootstrap 5 avec JavaScript sans jQuery

Formulaires Bootstrap 5 avec contraintes HTML, checkValidity et setCustomValidity : balisage correct, retours et vérifications serveur.

Validation Bootstrap 5

Bootstrap 5 ne nécessite pas jQuery. Associez les contraintes HTML required et type=email aux classes de retour Bootstrap et au JavaScript natif. Ce formulaire de démonstration envoie vers /feedback : remplacez ce chemin par un véritable point d’entrée. Chargez la feuille CSS Bootstrap 5.

Balisage du formulaire

Ajoutez needs-validation et novalidate au formulaire. novalidate désactive les infobulles natives sans empêcher l’API de validation. Les champs ont form-control, des labels associés, name, required et invalid-feedback. Affichez le HTML comme exemple de code, sans placer de formulaire actif dans l’article.

<form class="needs-validation" novalidate method="post" action="/feedback">
  <div class="mb-3">
    <label class="form-label" for="name">Name</label>
    <input class="form-control" id="name" name="name" required>
    <div class="invalid-feedback">Enter your name.</div>
  </div>
  <div class="mb-3">
    <label class="form-label" for="email">Email</label>
    <input class="form-control" id="email" name="email" type="email" required>
    <div class="invalid-feedback">Enter a valid email address.</div>
  </div>
  <button class="btn btn-primary" type="submit">Send</button>
</form>

Envoi en JavaScript natif

Écoutez submit. form.checkValidity() vérifie les contraintes ; en cas d’échec, preventDefault() bloque l’envoi et was-validated affiche les retours Bootstrap. Si les données sont valides, l’envoi normal vers /feedback se poursuit. Un vrai site exige aussi ses jetons CSRF et les contrôles serveur.

document.querySelectorAll('.needs-validation').forEach((form) => {
  form.addEventListener('submit', (event) => {
    if (!form.checkValidity()) {
      event.preventDefault();
      event.stopPropagation();
    }
    form.classList.add('was-validated');
  });
});

Contraintes personnalisées

Si vous ajoutez confirmEmail, comparez-le à email avec setCustomValidity(). Contrôlez les deux champs à chaque événement input afin d’effacer l’ancienne erreur avec une chaîne vide. L’extrait facultatif nécessite un champ id confirmEmail ; traduisez le message affiché.

const email = document.querySelector('#email');
const confirmation = document.querySelector('#confirmEmail');
function validateMatch() {
  confirmation.setCustomValidity(
    confirmation.value === email.value ? '' : 'Email addresses differ'
  );
}
email.addEventListener('input', validateMatch);
confirmation.addEventListener('input', validateMatch);

Accessibilité et sécurité

Bootstrap signale que certains styles de validation personnalisés côté client sont mal exposés aux technologies d’assistance. Testez clavier et lecteur d’écran, ou préférez les messages natifs ou les retours côté serveur. Validez et autorisez toujours chaque requête côté serveur.

Tests pratiques

Essayez des champs vides, des adresses invalides, une saisie correcte et des envois répétés. Pour un envoi AJAX, retirez was-validated si vous réinitialisez l’affichage. Associez des messages clairs aux champs : les classes CSS ne suffisent pas à l’accessibilité.

Sources

Bootstrap 5.3 : https://getbootstrap.com/docs/5.3/forms/validation/ ; API HTML : https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation .