Programmiamo

PROGRAMMIAMO

Html - Convalida dati form in Javascript

Convalida dei dati inseriti nel form

Prima di inviare i dati utente presenti in un form è buona norma controllare che questi dati siano validi. Ad esempio si potrà controllare che i campi non siano stati lasciati vuoti, che l'indirizzo mail indicato sia scritto correttamente eccetera. Queste operazioni preliminari vengono dette convalida dei dati.

Senza voler approfondire troppo per ora il problema della convalida dei dati, osserviamo però che, a differenza dell'elaborazione del form e dell'invio di una mail, questa parte può essere eseguita sul computer client dell'utente (cioè prima dell'invio dei dati al server remoto).

In pratica bisogna usare un altro linguaggio di programmazione (il termine tecnico è linguaggio di scripting), questa volta però non lato server (come il php), ma lato utente. Il linguaggio che utilizzeremo noi per la convalida è il javascript. Si osservi la pagina seguente che contiene il form:

<!DOCTYPE html>

<html lang="it">

<head>

<meta charset="utf-8">

<title> Un semplice form </title>

<link rel="stylesheet" href="stili.css">

<script> 

function riempita(box)
{
if (box.value.length < 1)
  {
  alert ("Errore! La casella di testo è vuota!");
  return false;
  }
return true;
}

function email(box)
{
var apos, dotpos, lastpos; 
apos = box.value.indexOf("@");
dotpos = box.value.lastIndexOf(".");
lastpos = box.value.lenght-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3)
  {
  alert("Errore! La casella di testo non contiene un indirizzo mail valido!");
  return false;
  }
return true;
}

</script>

</head>

<body>
<form action="elabora.php" method="post" name = "utente" enctype="multipart/form-data" 
onsubmit = "return email(mail) && riempita(nome) && riempita(commento)"> 
<p> 
<strong>Nome:</strong><br> 
<input type="text" name="nome"> 
</p> 
<p> 
<strong>Mail:</strong><br> 
<input type="text" name="mail"> 
</p> 
<p> 
<strong>Commento:</strong><br> 
<input type="text" name="commento"> 
</p> 
<p> 
<input type="submit" value="Invia"> 
<input type="reset" value="Annulla"> 
</p> 
</form>

</body>

</html>

Le due funzioni scritte all'inizio (riempita e email) servono per verificare rispettivamente che una casella di input non sia vuota e che un campo mail contenga un indirizzo scritto in modo corretto.

Si osservi in particolare l'intestazione del form:

<form action="elabora.php" method="post" name = "utente" enctype="multipart/form-data" 
onsubmit = "return email(mail) && riempita(nome) && riempita(commento)">

L'attributo onsubmit significa che al momento dell'invio vengono verificate le tre caselle di testo contenute nel form. Solo se tutte e tre le chiamate a funzione tornano il valore true (vero), il form viene inviato a elabora.php. Si osservi l'operatore logico and (&&) usato per concatenare la chiamata alle tre funzioni di verifica: basta che una sola delle tre funzioni torni il valore false e automaticamente l'invio viene abortito.

Per approfondire il problema della convalida di un form (e in particolare della convalida di altri campi, come radio, option etc.) vedi questo articolo su HTML.IT.

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it

Segui @ElePrograMania