Validazione live di un form
Controlla i campi mentre l'utente scrive e mostra messaggi chiari prima dell'invio.
Quando si usa
Quando vuoi aiutare l'utente a correggere subito email, password o campi obbligatori prima dell'invio.
Perché si usa
I messaggi immediati riducono errori e frustrazione, ma devono restare chiari e non sostituire la validazione lato server.
Vantaggi principali
- Feedback immediato
- Messaggi visibili vicino al campo
- Migliore esperienza nei moduli
Anteprima del risultato
La simulazione mostra un messaggio di controllo sotto il campo email.
Formato email corretto.
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<label>Email
<input id="email" type="email" aria-describedby="msgEmail">
</label>
<p id="msgEmail" class="messaggio"></p>
<script>
const email = document.getElementById('email');
const msg = document.getElementById('msgEmail');
email.addEventListener('input', function(){
if(email.validity.valid){
msg.textContent = 'Formato email corretto.';
msg.className = 'messaggio ok';
}else{
msg.textContent = 'Inserisci un indirizzo email valido.';
msg.className = 'messaggio errore';
}
});
</script>Da personalizzare: ID dei campi, messaggi, regole di validazione e classi grafiche.
Errore da evitare: Non affidarti solo a JavaScript: sul server devi sempre ricontrollare i dati ricevuti.