Corsi registrati su
C, C++, Python, JavaScript
Corsi in diretta per la formazione di Front End Developer e Back End Developer
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.
Esempio di possibile risoluzione: validare un form in JavaScript
Utilizzeremo un metodo a scopo didattico molto semplice, in quanto successivamente, quando impareremo ad utilizzare le Ajax, svilupperemo un metodo molto più funzionale.
Inoltre in questo esempio, per validare un form in JavaScript, potremmo utilizzare il metodo getElementById(), come abbiamo utilizzato negli esempi precedenti, ma vi mostro un altro modo per recuperare i dati dai campi di input.
Form in html
Per creare il nostro esempio, su come validare un form in JavaScript, innanzitutto dobbiamo creare il nostro form in html, come abbiamo già fatto nell’articolo sui form html.
Diamo al form il nome di invio per poi poterlo richiamare.
Inseriamo i vari campi di input con le relative etichette e infine il pulsante per inviare i dati su cui inseriremo l’evento onclick:
<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="text" 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="submit" value="Invia" onclick="valida()"></p>
</form>
Script per validare il form
Adesso dobbiamo costruire la nostra 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 come detto prima è il nome che abbiamo assegnato al form e nome è il campo di input.
Dopo aver preso tutti i campi, passo ai controlli.
Il primo campo che controllo sarà il nome. Se il nome è un campo vuoto allora faccio aprire la finestra di dialogo che mi avvisa che il campo deve essere compilato (ormai come dicevo prima, questo metodo è un pò primitivo).
Faccio lo stesso con il campo telefono, ma controllo anche che sia numerico.
Per quanto riguarda la mail, devo controllare se è un’espressione nella forma: nome@dominio.it.
Perciò utilizzo le espressioni regolari:
var email_valid = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/;
Dopo faccio il test per vedere se la mail inserita è nel formato dichiarato nella variabile email_valid.
Se il test è false, richiedo nuovamente l’inserimento, suggerendo di inserire un formato valido.
Poi faccio il controllo sulla password. Innanzitutto controllo la lunghezza, per verificare che sia composta almeno da sei caratteri e poi controllo se la conferma password coincide con questa.
N.B. anche per la password potrei impostare un’espressione regolare in modo da rispettare determinati standard; tipo caratteri minuscoli e maiuscoli, ecc…
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.
Allego lo script per validare un form in JavaScript.
<script type="text/javascript">
<!--
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");
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;
}
// Espressione regolare dell'email
var email_valid = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-]{2,})+.)+([a-zA-Z0-9]{2,})+$/;
if (!email_valid.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();
}
}
//-->
</script>Alcuni link utili
Come trovare immagini per il sito web
Quali colori scegliere per un sito web
Quali font scegliere per un sito web
Collegamenti interni ad una pagina web
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