JavaScript  »  Articoli  »  Programmazione Javascript 

L’argomento della validazione dei dati di una form tramite JavaScript è noto alla maggior parte degli sviluppatori di applicazioni Web. L’approccio classico consiste nell’intercettare un determinato evento (Blur, Click, Submit) ed eseguire un’apposita funzione JavaScript che verifichi la validità dei dati inseriti dall’utente.

Questa soluzione, descritta dall’articolo Validare e inviare un form con JavaScript , ha indubbi vantaggi, tra cui l’immediatezza della risposta nel caso di inserimento di valori errati, il non utilizzo della banda di comunicazione e il non coinvolgimento della parte server dell’applicazione. Tuttavia, l’approccio classico alla validazione dei dati presenta qualche svantaggio.

Gli svantaggi dell’approccio classico

Non mi riferisco alla possibilità che il client non supporti JavaScript o il supporto del linguaggio sia disabilitato. Questa eventualità è sempre presente e deve essere gestita con un ulteriore controllo server-side. Mi riferisco, invece, al fatto che le funzioni di validazione hanno quasi sempre la stessa struttura e lo sviluppatore deve ricrearla tutte le volte per ciascun campo da convalidare.

Consideriamo il semplice caso di una form con due campi, nome e cognome, la cui funzione di convalida verifichi semplicemente che sia stato effettivamente inserito un valore in ciascuno di essi. La form potrebbe avere la seguente struttura:

<form method=”post” name=”dati” action=”elabora.asp”
onSubmit=”return Convalida()”>
Nome: <input type=”text” name=”nome”/>
<br/>
Cognome: <input type=”text” name=”cognome”/>
<br/>
<input type=”submit” value=”Invia” />
</form>

La funzione di convalida potrebbe avere la seguente forma:

function Convalida() {
var nome = document.dati.nome.value;
var cognome = document.dati.cognome.value;
if ((nome.value == “”) || (nome.value == “undefined”)) {
alert(“Campo obbligatorio!”);
document.dati.nome.focus();
return false;
}
if ((cognome.value == “”) || (cognome.value == “undefined”)) {
alert(“Campo obbligatorio!”);
document.dati.cognome.focus();
return false;
}
return true;
}

Cosa succede se aggiungiamo un terzo campo alla form, per esempio un campo per l’indirizzo, e vogliamo che anche l’inserimento di un valore in questo campo sia obbligatorio? Dobbiamo aggiungere un altro if analogo a quelli per la convalida dei campi nome e cognome. E se oltre a verificare che venga inserito un valore nei campi dobbiamo verificare che il numero di caratteri sia compreso tra un valore minimo ed un massimo? Dobbiamo intervenire su tutti gli if della funzione di convalida. Niente di complicato, ma ad una più attenta analisi possiamo individuare almeno i seguenti svantaggi:

• la scrittura delle funzioni di convalida è un’attività ripetitiva e come tale può essere fonte di errori di digitazione, specialmente se si utilizza il copia ed incolla e può sfuggire qualche dettaglio dell’adattamento del codice per un nuovo campo;
• la manutenzione del codice può diventare impegnativa quando si scopre un bug o si deve effettuare una modifica;
• il codice per la validazione risulta difficilmente riusabile in altre applicazioni.

Altri articoli

Altre guide

Altre newsletter