Controlliamo la form

Per controllare i campi di una form (di solito campi obbligatori e email ben formata), ci sono due modi: lato server e lato client.
Il primo metodo è senz'altro più sicuro, ma spesso più complicato: si deve conoscere un linguaggio di scripting lato server, sorgono complicazioni per il mantenimento dei campi già compilati (specialmente se la form è inviata con il metodo POST). Inoltre capita spesso che un utente non smaliziatissimo non sia in grado (non solo perchè non sa, ma perchè non può) di occuparsi del lato server: magari la form "va" ad uno script che il provider ha già pronto all'uso.

In questi casi fa gioco il controllo lato client, ottenuto tramite Javascript.

Di script per la validazione di una form (nel senso detto sopra) è piena la rete. Tuttavia non ero riuscito a trovarne uno flessibile, che funzionasse con diversi tipi di campi (non solo input text, ma radio, checkbox, etc.) e che lasciasse quanto più separata la form vera e propria (l'HTML) dal processo di validazione (Javascript).

Mi sono quindi scritto quanto segue:

<script type="text/javascript" language="javascript">
<!--
/*----------------------------------------
Script realizzato da Matteo Boria - http://www.8-p.it
Puoi usarlo senza restrizioni
(usarlo, modificarlo, integrarlo, migliorarlo 8^)).
Per favore, lascia comunque questo commento (credit).
Se vuoi avvisarmi che l'hai usato, mi farai contento:
js@8-p.it
Le variabili nello script da toccare sono commentate.
Per quanto riguarda la form nell'html, l'unica richiesta è:
<form [...etc...] onsubmit="return controllaForm(this);">
----------------------------------------*/
var indiceReq;
// il carattere § verrà sostituito con il nome "umano" del campo
var messAlert = "Attenzione! Il campo '§' è obbligatorio";
//nomi ("name") dei campi obbligatori nella form
aObblig = new Array("cognome", "uso_script","ut_email");
//nomi "umani" (per l'alert) degli stessi campi
aObbligNomi = new Array("Cognome", "Motivo del download", "Email");
//lascia vuoto se non c'è campo email
//questo campo deve comunque essere presente nell'elenco sopra
campoEmail = "ut_email";
Array.prototype.inArray = function (cercato){
 var i;
 for (i=0; i < this.length; i++) {
  if (this[i] == cercato) {
   indiceReq = i;
   return true;
  }
 }
 return false;
};
function alertErr(){
 alert(messAlert.replace("§",aObbligNomi[indiceReq]));
}
function controllaForm2(qualeForm){
 for (n=0; n<qualeForm.elements.length; n++){
  alert(qualeForm[n].name+" : "+qualeForm[n].type);
 }
}
function controllaForm(qualeForm){
 for (n=0; n<qualeForm.elements.length; n++){
  if(aObblig.inArray(qualeForm[n].name)){
   if(qualeForm[n].type=="radio"){
    almenoUnRadio = false;
    for(j=0; j<qualeForm[qualeForm[n].name].length; j++){
     if (qualeForm[qualeForm[n].name][j].checked){
      almenoUnRadio = true;
     } 
    }
    if(!almenoUnRadio){
     alertErr();
     qualeForm[n].focus();
     return false;
    }
   } else if(qualeForm[n].type=="checkbox"){
    if(qualeForm[n].checked==false){
     alertErr();
     qualeForm[n].focus();
     return false;
    }
   } else if(qualeForm[n].type=="select-one"){
    if(qualeForm[n].value==null || qualeForm[n].value=="" || qualeForm[n].selectedIndex==0){
     alertErr();
     qualeForm[n].focus();
     return false;
    }
   } else {
    if (qualeForm[n].value==null || qualeForm[n].value==""){
     alertErr();
     qualeForm[n].focus();
     return false;
    } else if (qualeForm[n].name == campoEmail){
     stampoEmail = /^([a-zA-Z0-9_\.\-])+@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9])+$/;
     if(!stampoEmail.test(qualeForm[n].value)){
      alert("Indirizzo email non valido!");
      qualeForm[n].focus();
      return false;
     }
    }
   }
  }
 }
}
-->
</script>

Uso: Inserisci il Javascript (magari prima della fine della HEAD, se puoi), e, per la form: <form [...] onsubmit="return controllaForm(this);">

Tutto qua.

Se vuoi, puoi scaricare lo zip con script, istruzioni e una form di esempio.