JavaScript: problematiche e soluzioni dei controlli di validazione
L'utilizzo di JavaScript come meccanismo di controllo e validazione delle form HTML è una pratica consolidata da più di un decennio. Anche con l'avvento delle più recenti librerie JavaScript, come ad esempio jQuery e Prototype, la validazione via JavaScript rimane sempre valida, soprattutto nel caso di form molto semplici. Se dobbiamo controllare solo uno o due campi inseriti dall'utente, a volte non serve coinvolgere una libreria di alto livello, ma è più semplice rispolverare le capacità di JavaScript.
C'è anche un altro motivo per cui vale la pena ricordarsi dei meccanismi di validazione offerti da JavaScript: qualsiasi codice realizzato con jQuery o simili, è pur sempre “incorniciato” (o “infarcito”) da altro codice JavaScript, motivo per cui non possiamo fare a meno di un minimo di codice JavaScript.
Questo articolo non intende discutere i metodi di validazione tradizionali JavaScript, che dovrebbero essere già noti, ma pone l'attenzione su alcune problematiche collegate all'argomento, che possono essere considerate tematiche trasversali a tutte le applicazioni JavaScript. Risolvere queste problematiche avrà quindi un duplice scopo: evitare errori nel processo di validazione e chiarire alcune caratteristiche di JavaScript che sono ereditate anche da librerie di livello superiore.
Per raggiungere l'obiettivo ci tornerà utile analizzare un caso specifico, che sarà il nostro banco di prova per toccare con mano alcune problematiche che altrimenti resterebbero astratte. Supponiamo a tal fine di avere una form HTML con alcuni campi, e che la maggior parte di questi campi non necessitino di una validazione specifica, ovvero non debbano rispettare alcun pattern o formato ben definito. In questo caso, il meccanismo di validazione dovrebbe occuparsi semplicemente di controllare che i campi obbligatori siano compilati, cioè non siano lasciati vuoti dall'utente.
Supponendo che i campi obbligatori siano due, potremmo avere:
<input type="text" name="the_text" value="Text" onBlur="checkInput(this);"/> <input name="the_default" value="Default" onBlur="checkInput(this);"/>
ecc...
esistono molti modi di soddisfare questa esigenza. Si potrebbe usare il DOM per recuperare un riferimento a tutte le form (l'array document.forms) e scorrere così tutti gli input, validandoli uno per uno all'interno di un ciclo for. Scartiamo questa soluzione perché ipotizziamo che non tutti i campi siano obbligatori: occorre quindi definire un meccanismo di selezione dei soli campi obbligatori, che sono in genere un sottoinsieme di tutti gli input presenti nel DOM.
Un'altra soluzione potrebbe usare le classi CSS per definire gli elementi obbligatori, che potrebbero avere ad esempio class=”mandatory_input”. Questo dovrebbe funzionare, ma non è in generale una buona pratica, perché mescola le funzioni di controller (controllo e validazione) con quelle tipiche della presentazione (fogli di stile). In alcuni casi è lecito ignorare questa pratica, ma oggi tenteremo un'altra strada, che si presta meglio ad evidenziare alcune problematiche tipiche dei controlli di validazione JavaScript.
Supponiamo perciò di procedere assegnando ad ogni campo obbligatorio la funzione JavaScript checkInput, come nell'esempio visto sopra. In questi termini la definizione di quali sono i campi obbligatori (che l'utente deve necessariamente compilare) ed è delegata al codice HTML. Ribadiamo che questa è soltanto una delle possibilità, che abbiamo scelto perché ci permette di discutere il codice JavaScript illustrato nella prossima pagina.
