In questo articolo vedremo come creare e validare un form in JavaScript, ovvero garantire prima dell’invio dei dati che l’utente abbia immesso dei dati validi o quantomeno ‘abbastanza validi’.
Creazione della pagina in HTML
Per creare il nostro esempio, su come validare un form in JavaScript, innanzitutto dobbiamo creare il nostro form in html.
Inseriamo i vari campi di input con le relative etichette e infine il pulsante per inviare i dati su cui inseriremo l’evento onclick:
<html>
<body>
<form method="post" name="invio">
<p><label>Nome</label><input type="text" name="nome"></p>
<p><label>Telefono</label><input type="text" name="telefono"></p>
<p><label>Email:</label><input type="email" name="email"></p>
<p><label>Password</label><input type="password" name="password"></p>
<p><label>Conferma password:</label><input type="password" name="conferma"></p>
<br>
<p><input type="button" value="Invia" onclick="valida()"></p>
</form>
<div id="errore" style="background-color:red; visibility: hidden; padding:10px; color: white;"><p >Inserisci i dati del form</p></div>
</body>
</html>Implementazione della funzione
Adesso dobbiamo costruire la funzione valida() richiamata nel pulsante invia.
Per ricavare i vari campi immessi negli input in questo caso useremo:
document.nome_del_form.nome_campo.value;
quindi ad esempio: document.invio.nome.value dove invio è il nome che abbiamo assegnato al form e nome è il campo di input.
Il primo campo da controllare sarà il nome.
Se il nome è un campo vuoto allora mostriamo la finestra di dialogo che avvisa che il campo deve essere compilato.
Il campo telefono dovrà essere numerico.
Per quanto riguarda la mail utilizziamo l’attributo Type email
Infine il controllo sulla password controllando la lunghezza, per verificare che sia composta almeno da sei caratteri e poi controlliamo se la conferma password coincide con questa.
Se tutti i controlli sono ok, si passa all’invio del modulo, in questo caso occorre inserire in document.invio.action = “#”; al posto di # l’indirizzo della pagina che dovrà elaborare i dati.
Script : ecco il codice
<script type="text/javascript">
function errore(er)
{
var a=document.getElementById("errore");
a.innerHTML = er;
a.style.visibility='visible';
return false;
}
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;
if ((nome == "") || (nome == "undefined")) {
//alert("Devi inserire un nome");
errore("Devi inserire un nome");
document.invio.nome.focus();
return false;
}
if ((isNaN(telefono)) || (telefono == "") || (telefono == "undefined")) {
errore("Devi inserire il telefono, attenzione deve essere numerico!");
document.invio.telefono.value = "";
document.invio.telefono.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();
}
}
</script>Provalo qui
Inserisci i dati del form
