Validazione form
Validazione form con JavaScript
Introduzione alle tecniche di validazione dei form in JavaScript per controllare i dati inseriti dall’utente prima dell’invio.
Introduzione
La validazione dei form serve a garantire che i dati immessi dagli utenti siano corretti e completi prima di essere inviati al server. Con JavaScript possiamo controllare valori come campi vuoti, indirizzi email, numeri o lunghezze minime, migliorando l’esperienza utente e riducendo gli errori lato server.
- Verifica di campi obbligatori.
- Controllo di formati (es. email, numeri).
- Messaggi di errore personalizzati.
- Blocco dell’invio in caso di dati non validi.
Validazione di campi obbligatori
Controlliamo che un campo non sia vuoto prima dell’invio.
Codice Esempio: campo obbligatorio
<!-- HTML & JavaScript di riferimento --><form id="mioForm"><input type="text" id="nome" placeholder="Inserisci il nome"><button type="submit">Invia</button>
</form><script>document.getElementById("mioForm").addEventListener("submit", function(e) {let nome = document.getElementById("nome").value;if (nome === "") {alert("Il campo nome è obbligatorio!");e.preventDefault(); // blocca l'invio del form
}
});
</script>
Validazione di email
Possiamo usare un’espressione regolare per verificare che il formato dell’email sia valido.
Codice Esempio: controllo email
<!-- HTML & JavaScript di riferimento --><form id="formEmail"><input type="text" id="email" placeholder="Inserisci email"><button type="submit">Invia</button>
</form><script>document.getElementById("formEmail").addEventListener("submit", function(e) {let email = document.getElementById("email").value;let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {alert("Inserisci un indirizzo email valido!");e.preventDefault();
}
});
</script>
Validazione di lunghezza minima
Possiamo controllare che un campo abbia un numero minimo di caratteri.
Codice Esempio: password con almeno 6 caratteri
<!-- HTML & JavaScript di riferimento --><form id="formPass"><input type="password" id="password" placeholder="Password"><button type="submit">Invia</button>
</form><script>document.getElementById("formPass").addEventListener("submit", function(e) {let pass = document.getElementById("password").value;if (pass.length < 6) {alert("La password deve avere almeno 6 caratteri!");e.preventDefault();
}
});
</script>
Tabella riassuntiva
| Controllo | Descrizione | Esempio |
|---|---|---|
| Campo obbligatorio | Verifica che non sia vuoto | if (valore === "") |
| Controlla il formato con regex | regex.test(email) | |
| Lunghezza minima | Richiede un numero minimo di caratteri | if (pass.length < 6) |
Considerazioni
La validazione lato client con JavaScript migliora l’esperienza utente e riduce gli errori, ma non sostituisce mai la validazione lato server. Entrambi i livelli devono sempre coesistere per garantire sicurezza e affidabilità.
IP: 216.73.216.108
