Oggi vedremo come validare un form in JavaScript, ovvero garantire prima dell’invio dei dati che l’utente abbia immesso dei dati validi o quantomeno ‘abbastanza validi’.
Ecco come dovrà essere l’esempio del form in JavaScript. Provate ad inserire i dati e cliccate sul pulsante invia.
Validare un form in JavaScript - Codice HTML
Realizziamo il codice html necessario per realizzare l'esempio. L'obiettivo ricordiamo è quello di validare un form in JavaScript prima dell'invio dei dati.
Nel codie HTML inseriamo un form con il method post, che serve per inviare i dati, e una action che contiene il riferimento alla pagina che si occupa dell'inserimento o invio dei dati. Nel form inseriamo le etichette con i campi di input di riferimento ed un button per inviare i dati.
Ecco dunque una possibile implementazione:
<form method="post" action="#" name="invio">
<label for="nome">Nome</label>
<input type="text" name="nome">
<label for="telefono">Telefono</label>
<input type="text" name="telefono">
<label for="email">Email:</label>
<input type="text" name="email">
<label for="password">Password</label>
<input type="password" name="password">
<label for="conferma">Conferma password</label>
<input type="password" name="conferma">
<br>
<input type="button" value="Invia" onClick="valida()">
</form>Creaimo poi del CSS a piacere per formattare il nostro form per l'invio dei dati.
Codice JavaScript per validare un form in JavaScript
Realizziamo poi la funzione valida() legata all'evento onClick inserito nel button per l'invio dei dati.
function valida() {
// Variabili associate ai campi del modulo
const nome = document.invio.nome.value;
const password = document.invio.password.value;
const conferma = document.invio.conferma.value;
const telefono = document.invio.telefono.value;
const email = document.invio.email.value;
// Espressione regolare dell'email
const email_reg_exp = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/;
if (!nome) {
alert("Devi inserire un nome");
document.invio.nome.focus();
return false;
}
if (isNaN(telefono) || !telefono) {
alert("Devi inserire il telefono, attenzione deve essere numerico!");
document.invio.telefono.value = "";
document.invio.telefono.focus();
return false;
}
if (!email_reg_exp.test(email) || !email) {
alert("Devi inserire un indirizzo mail corretto");
document.invio.email.focus();
return false;
}
if (password.length < 6 || !password) {
alert("Scegli una password, minimo 6 caratteri");
document.invio.password.focus();
return false;
}
// Effettua il controllo sul campo CONFERMA PASSWORD
if (!conferma) {
alert("Devi confermare la password");
document.invio.conferma.focus();
return false;
}
if (password !== conferma) {
alert("La conferma password non corrisponde");
document.invio.conferma.value = "";
document.invio.conferma.focus();
return false;
} else {
document.invio.action = "#";
document.invio.submit();
}
}
Innanzitutto dichiariamo le variabili utilizzando const per associare i valori dei campi di input del modulo alle variabili corrispondenti. Poi viene definita un'espressione regolare per validare l'indirizzo email. Questa espressione regolare controlla se l'email è nel formato corretto.
Quindi effettuiamo i controlli iniziando dal campo nome. Controlliamo dunque se il campo "nome" è vuoto o non definito. Se è il caso, mostra un avviso, mette il fuoco sul campo "nome" e restituisce false per evitare l'invio del modulo.
Dopo controlliamo se il campo "telefono" contiene un valore numerico. Se non è numerico o è vuoto, mostra un avviso, pulisce il campo e restituisce false.
Poi utilizzamo l'espressione regolare per verificare se il campo "email" è nel formato corretto. Se non è corretto o è vuoto, mostra un avviso e restituisce false.
Dunque controlliamo se il campo "password" ha almeno 6 caratteri. Se non lo ha o è vuoto, mostra un avviso e restituisce false.
Controlliamo poi se il campo "Conferma Password" è vuoto. Se è il caso, mostra un avviso, mette il fuoco sul campo e restituisce false. Inoltre controlliamo se il campo "Password" e il campo "Conferma Password" corrispondono. Se non corrispondono, si mostra un avviso, puliamo il campo "Conferma Password", mettiamo il fuoco su di esso e restituiamo false.
Infine se tutte le validazioni sono superate con successo, imposta l'azione del modulo su "#" (può essere modificato con l'URL desiderato) e invia il modulo.
Conclusione
In questa lezione abbiamo visto come validare un form in JavaScript in maniera molto semplice, si potrebbero aggiungere altri controlli, ad esempio controllando la lunghezza del campo telefono o dando dei suggerimenti per la scelta della password, ecc.
Alcuni link utili
Come utilizzare JavaScript alert
Gioco indovina numero in JavaScript
Gioco della morra cinese in JavaScript
Semplice quiz utilizzando gli array
ciao,
complimenti per la chiarezza dell’articolo, una domanda:
come mai copiando il codice in una pagina html per fare le prove, ogni volta che clicco l’ok dell’alert mi azzer i campi giusti?
ho notato che l’esempio che hai messo in questa pagina non lo fa.
Grazie , saluti 🙂
Grazie, si il codice permette di lasciare i campi giusti.
Le allego il codice sotto per poterlo copiare meglio:
…
function valida() {
// Variabili associate ai campi del modulo
var nome = document.invio.nome.value;
var password = document.invio.password.value;
var conferma= document.invio.conferma.value;
var telefono = document.invio.telefono.value;
var email = document.invio.email.value;
// Espressione regolare dell’email
var email_reg_exp = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/;
if ((nome == “”) || (nome == “undefined”)) {
alert(“Devi inserire un nome”);
document.invio.nome.focus();
return false;
}
if ((isNaN(telefono)) || (telefono == “”) || (telefono == “undefined”)) {
alert(“Devi inserire il telefono, attenzione deve essere numerico!”);
document.invio.telefono.value = “”;
document.invio.telefono.focus();
return false;
}
if (!email_reg_exp.test(email) || (email == “”) || (email == “undefined”)) {
alert(“Devi inserire un indirizzo mail corretto”);
document.invio.email.focus();
return false;
}
if (password.length<6 || (password == "") || (password == "undefined") ) {
alert("Scegli una password, minimo 6 caratteri");
document.invio.password.focus();
return false;
}
//Effettua il controllo sul campo CONFERMA PASSWORD
if ((conferma == "") || (conferma == "undefined")) {
alert("Devi confermare la password");
document.invio.conferma.focus();
return false;
}
if (password != conferma) {
alert("La conferma password");
document.invio.conferma.value = "";
document.invio.conferma.focus();
return false;
}
else {
document.invio.action = "#";
document.invio.submit();
}
}
...
codice html da inserire sotto:
< form method="post" name="invio" >
< label >Nome< /label >< input type="text" name="nome">
< label>Telefono< /label>< input type="text" name="telefono">
< label>Email:< /label>< input type="text" name="email">
< label>Password< /label>< input type="password" name="password">
< label >Conferma password:< /label>< input type="password" name="conferma">
< input type="button" value="Invia" onClick="valida()">
< /form>
Ciao,
complimenti per l’articolo.
volevo sottoporti del codice adattato utilizzando quello da inserito in questo articolo.
var numero = document.nomeform.n_balugani_bav12.value;
function valida() {
if (numero < 3) {
alert("Devi selezionare un altro addolcitore");
return false;
}else {
document.nomeform.action = "miscela.php";
document.nomeform.submit();
}
}
Il mio problema è nella variante numero se gli assegno un valore inferiore a 3 correttamente mi dice di inserire altri addolcitori, se assegno 4 passa a miscela.php.
Se alla variabile numero inserisco “document.nomeform.n_balugani_bav12.value;” quando clicco invio passa a miscela.php.
Puoi aiutarmi
Avevo scordato di inserire il codice del form