Validazione form in Bootstrap 5 con Vanilla JavaScript: addio a jQuery

Con l'uscita di Bootstrap 5, il celebre framework front-end ha completamente rimosso la dipendenza da jQuery in favore di Vanilla JavaScript. Questa scelta ha reso le applicazioni web più leggere, veloci e al passo con gli standard moderni del Web.

In questa guida vedremo come creare e validare form dinamici lato client sfruttando il sistema di classi nativo di Bootstrap 5 e l'API di validazione HTML5, senza caricare alcuna libreria esterna.

La struttura HTML del Form

Bootstrap 5 mette a disposizione classi di feedback come .valid-feedback e .invalid-feedback che vengono visualizzate automaticamente in base al risultato della validazione.

Per attivare lo stile personalizzato, dobbiamo aggiungere l'attributo novalidate al form per disabilitare i tooltip nativi del browser e applicare la classe .needs-validation.

Lo script di validazione in Vanilla JS

Lo script intercetta l'evento submit del modulo, verifica lo stato con il metodo nativo checkValidity() e applica la classe Bootstrap .was-validated che attiva lo stile visuale dei campi.

document.addEventListener('DOMContentLoaded', () => {
  'use strict';

  const forms = document.querySelectorAll('.needs-validation');

  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }

      form.classList.add('was-validated');
    }, false);
  });
});

Validazione avanzata dei campi personalizzati

Se desideri aggiungere regole su misura (ad esempio la verifica della corrispondenza di due password o la forza della password), puoi sfruttare il metodo setCustomValidity() dell'API HTML5 direttamente in JavaScript.

const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');

function checkPasswords() {
  if (password.value !== confirmPassword.value) {
    confirmPassword.setCustomValidity('Le password non coincidono');
  } else {
    confirmPassword.setCustomValidity('');
  }
}

password.addEventListener('change', checkPasswords);
confirmPassword.addEventListener('keyup', checkPasswords);

Vantaggi del passaggio a Vanilla JS

• Prestazioni superiori: Riduzione del peso della pagina evitando di scaricare la libreria jQuery.
• Codice più pulito: Utilizzo degli standard ECMAScript moderni (ES6+).
• Piena integrazione: Sfrutta l'API di validazione nativa dei browser mantenendo lo stile grafico moderno di Bootstrap 5.

Raccomandazioni

• La validazione lato client migliora l'esperienza utente (UX), ma non sostituisce mai la validazione lato server.
• Usa sempre tipi di input semantici (email, url, number) per beneficiare dei controlli integrati del browser.
• Mantieni i messaggi di errore chiari e di immediata comprensione all'interno dei div .invalid-feedback.

Fonti ufficiali

• Bootstrap 5 — Form Validation Documentation
• MDN Web Docs — Constraint Validation API