✅ Validazione client-side — feedback visivo integrato
Bootstrap integra la validazione HTML5 nativa (attributi come required, pattern) con classi CSS che mostrano visivamente il risultato — verde per valido, rosso per non valido — senza scrivere JavaScript di validazione da zero.
<form class="needs-validation" novalidate>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" required>
<div class="invalid-feedback">Inserisci un'email valida.</div>
</div>
<button class="btn btn-primary" type="submit">Invia</button>
</form>
<script>
// JavaScript minimo richiesto per attivare la validazione visiva di Bootstrap
document.querySelectorAll('.needs-validation').forEach(form => {
form.addEventListener('submit', (e) => {
if (!form.checkValidity()) {
e.preventDefault();
e.stopPropagation();
}
form.classList.add('was-validated');
});
});
</script>
⚠️ novalidate sul <form> disattiva il popup di validazione nativo del browser (quello con l'icona rossa integrata), lasciando che sia Bootstrap a gestire visivamente il feedback tramite was-validated + invalid-feedback — senza novalidate, i due sistemi di validazione entrerebbero in conflitto.
💡 Il piccolo script JavaScript mostrato sopra è OBBLIGATORIO: senza di esso, la classe was-validated non viene mai aggiunta al form, e il feedback visivo (bordi verdi/rossi) non compare mai, anche se gli attributi required sono corretti.