Validare i form con Bootstrap 5 e JavaScript senza jQuery

Form Bootstrap 5 con validazione HTML, checkValidity e setCustomValidity: markup corretto, feedback e controllo lato server.

Bootstrap 5 e validazione

Bootstrap 5 non richiede jQuery. Puoi usare i vincoli HTML, per esempio required e type=email, con le classi di feedback Bootstrap e JavaScript nativo. In questo esempio un modulo di feedback invia i dati a /feedback: sostituisci l’indirizzo con un endpoint reale. Devi comunque caricare il CSS di Bootstrap 5.

Markup del modulo

Aggiungi needs-validation e novalidate al form: novalidate disattiva i tooltip automatici del browser ma lascia disponibile l’API di validazione. Gli input hanno la classe form-control, etichette associate, attributi name, required e messaggi invalid-feedback. Il codice HTML va mostrato come esempio, non inserito come modulo attivo nel corpo di un articolo.

<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>

Invio con JavaScript nativo

Intercetta submit. form.checkValidity() verifica i vincoli; se fallisce, preventDefault() impedisce l’invio e la classe was-validated mostra il feedback Bootstrap. Quando i dati sono validi, il browser continua il normale invio a /feedback. In una vera applicazione includi anche i token CSRF e gli altri controlli richiesti dal server.

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

Regole personalizzate

Se aggiungi un campo confirmEmail al form, puoi confrontarlo con email mediante setCustomValidity(). Richiama la verifica all’evento input di entrambi i campi, così un errore precedente viene cancellato passando una stringa vuota. Il frammento seguente è facoltativo e richiede un input con id confirmEmail; adatta il testo del messaggio alla lingua della pagina.

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à e sicurezza

La documentazione Bootstrap avverte che alcuni stili personalizzati di validazione lato client non sono esposti correttamente alle tecnologie assistive: testa il modulo con tastiera e lettore di schermo, oppure preferisci i messaggi nativi del browser o la validazione lato server. Non fidarti mai della validazione nel browser: valida e autorizza ogni richiesta anche sul server.

Verifica pratica

Prova campi vuoti, email malformate, input corretti e invii ripetuti. Se usi un invio AJAX, ripristina lo stato visuale rimuovendo was-validated quando serve. I messaggi devono essere chiari e associati ai controlli; le classi CSS non sostituiscono spiegazioni accessibili.

Fonti

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 .