Gestire Errori in Javascript Senza Ricaricare La Pagina

Ora vedremo come gestire un form d’inserimento in modo tale da poter mostrare gli errori (2) dovuti a campi obbligatori non compilati, senza dover ricaricare la pagina o salvare i valori in sessione. Ecco di cosa parleremo in questo articolo.

  • Form d’inserimento
  • Script di controllo
  • Form con messaggi di errore

Il form d’inserimento è come segue (1), mentre il form finale con la visualizzazione degli errori è il (2):

1)  2)

Il codice HTML per la creazione del form è:

<div id=”contenitore”>

<div>Compila il Form</div>

<div>Inserisci qui i tuoi dati.</div>

<form action=”invia.php” method=”post”>

<div id=”riga”>

<input type=”text” name=”nome” value=”Nome” id=”nome” onfocus=”javascript:document.getElementById(this.id).value = ”;” />

<div id=”err_nome” style=”color: #ff0000; display: none;”>Campo obbligatorio</div>

</div>

<div id=”riga”>

<input type=”text” name=”cognome” value=”Cognome” id=”cognome” onfocus=”javascript:document.getElementById(this.id).value = ”;” />

<div id=”err_cognome” style=”color: #ff0000; display: none;”>Campo obbligatorio</div>

</div>

<div id=”riga”>

<div id=”err_privacy” style=”color: #ff0000; display: none;”>È necessario dare il consenso alla privacy</div>

</div>

<div id=”riga_privacy”>

<input type=”checkbox” name=”privacy” />

<label>Accetto la privacy.</label>
</div>

<div style=”clear: both”></div></div>

<input type=”button” name=”button” value=”Invia” style=”border: 1px solid black; background-color: orange; color: #ffffff; font-weight: bold;” onClick=”javascript:controlla()”/>

</form>

</div>

Come si può notare, sul onClick del bottone c’è la chiamata ad una funzione controlla(). Tale funzione controlla se i campi inseriti hanno un valore diverso dal valore di default (si noti, il valori di default del campo Nome è value=”Nome”, cosa analoga per i restanti campi).  Si noti anche che sull’onFocus dell’input text il valore di default viene “sbiancato” tramite il JS document.getElementById(this.id).value = ‘ ‘;

Qui di seguito il codice JS della funzione controlla() richiamato dal bottone:

<script language=”javascript”>
function controlla(){

var form = document.forms[0];

var prefix = ‘0039’;

var mess = “”;
if ((form.nome.value == “”) || (form.nome.value == “Nome”)){

mess += “Nome obbligatorio\n” ;

document.getElementById(‘err_nome’).style.display = “block”;   }

else{

document.getElementById(‘err_nome’).style.display = “none”;   }
if ((form.cognome.value == “”) || (form.cognome.value == “Cognome”)){

mess += “Cognome obbligatorio\n” ;

document.getElementById(‘err_cognome’).style.display = “block”;   }

else{

document.getElementById(‘err_cognome’).style.display = “none”;   }

if (form.privacy.checked == false){

mess += “Deve accettare la legge sul trattamento dati personali\n” ;       document.getElementById(‘err_privacy’).style.display = “block”;   }

else{

document.getElementById(‘err_privacy’).style.display = “none”;   }
if (mess == “”){

form.submit();       return true;   }

else {

return false;   }

}
</script>


Se si prova a compilare il campo cognome e lasciare vuoti gli altri campi, la funzione controlla() controlla i valori dei campi e trovando gli altri campi non compilati, mostra la seguente schermata:

Come si può notare i valori nella pagina non vengono persi, ma conservati e sui campi non compilati vengono mostrati i messaggi di errore.

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...