Nell'esempio precedente si e' visto come creare un form personalizzato nel corpo pagina

Spesso nei form sono presenti campi che vanno considerati obbligatori, oppure campi che richiedono un formato particolare come ad esempio gli indirizzi email

 

Tramite l'utilizzo di javascript e' possibile fare in modo che questi campi vengano controllati dal browser dell'utente prima di essere confermati

 

Innanzitutto va aggiunto un elemento script alla pagina

 

 

 

Una funzione script di controllo potrebbe ad esempio essere la seguente:

 

<script type="text/javascript">

   function checkForm(frm){

      // controllo campo obbligatorio cognome

      if(isEmpty(frm["campo 1"].value)){

         alert("ATTENZIONE!\nPer procedere è necessario compilare il cognome!");

         frm["campo 1"].focus();

         return false;

      }

      // controllo campo obbligatorio nome

      if(isEmpty(frm["campo 2"].value)){

         alert("ATTENZIONE!\nPer procedere è necessario compilare il nome!");

         frm["campo 2"].focus();

         return false;

      }

      // controllo campo email

      if(!isMail(frm["campo 4"].value)){

         alert("ATTENZIONE!\nValore non valido!\nControllare campo email!");

         frm["campo 4"].focus();

         frm["campo 4"].select();

         return false;

      }

   return true;

   }   

</script>

 

N.B. Nell'esempio soprariportato vengono utilizzate le funzioni: isEmpty() ed isMail() che sono funzioni presenti sul template standard e che sono utilizzabili per controllare i campi obbligatori ed i campi email. Per altri tipi di controlli andranno ovviamente create altre funzioni ad-hoc dall'utente

 

Come spiegato sopra questo codice va quindi inserito come oggetto "script" della pagina

 

 

 

 

Il lavoro non e' ancora completato perche' andra' anche modificato il form creato in precedenza in modo che alla conferma venga richiamato lo script

Quindi nel codice del form andra' aggiunta la parte evidenziata in grassetto qui sotto

 

<p>

Testo introduttivo<br />

</p>

<form action="default.asp?cmd=customForm" method="post" onsubmit="return checkForm(this);">

       <label>Cognome</label><br />

       <input name="campo 1" size="30" /><br />

       <label>Nome</label><br />

       <input name="campo 2" size="30" /><br />

..............

..............

 

 

Fatto questo, ed una volta sincronizzato il sito, il controllo sul form dovrebbe essere funzionante