Categories: Internet

Gestione di Eventi e Validazione di Moduli in JavaScript

La programmazione lato client con JavaScript è strettamente legata al DOM ( Document Object Model ) del browser e quindi, anche se è stato quasi tutto standardizzato, occorre prestare molta attenzione alle differenze che si possono trovare con i vari browser. In questo articolo vedremo di spiegare come gestire gli eventi attraverso dei semplici esempi. Vediamo quindi i vari eventi che è possibile intercettare:

onClick – attiva un’azione al click su un elemento.
onChange – attiva un’azione quando il contenuto di un elemento viene cambiato.
onLoad – applicabile al tag BODY, avviene al caricamento della pagina.
onUnload – applicabile al tag BODY, avviene alla chiusura della pagina.
OnMouseOver – attiva un’azione quando il mouse viene posizionato sopra un elemento.
onMouseOut – attiva un’azione quando il mouse abbandona un elemento.
onSubmit – applicabile al tag FORM, avviene alla spedizione di un modulo.

Ad esempio possiamo visualizzare un messaggio prima di un download:

<html>
<head><title>Download</title></head>

<body>

<a href="XXXXX.XXX" onClick="alert('Ma complimenti!!!');">
   Download XXXXX.XXX</a>

</body>

</html>

oppure possiamo validare i dati inseriti dall’utente prima di spedirli:

<html>
<head><title>Registrazione</title></head>

<script language="javascript">

   function validaDati()
   {
      nome = document.registrazione.nomeUtente.value;
      pass1 = document.registrazione.passUtente1.value;
      pass2 = document.registrazione.passUtente2.value;

      if (nome.length < 3 || nome.length > 20)
      {
 alert("Utente non valido!");
 return false;
      }

      if (pass1.legth < 3)
      {
             alert("Password non valida!");
 return false;
       }

       if (pass1 != pass2)
       {
 alert("Le password non coincidono!");
 return false;
       }

       if (!confirm("Continuare a registrare " + nome + "?"))
 return false;

      return true;
}

</script>

<body>

<form name="registrazione" action="xxxxx.php"
      method="post" onSubmit="return validaDati()">
   Nome utente: <input type="text" name="nomeUtente"><br>
   Password: <input type="password" name="passUtente1"><br>
   Conferma Password: <input type="password" name="passUtente2">
      <br><br>
   <input type="submit" value="Registrazione">
</form>

</body>

</html>

Il cuore di tutta la procedura è il gestore dell’evento onClick nel FORM, in base al valore restituito ( true o false ) il processo di registrazione sarà portato avanti oppure interrotto.