Quando si realizza una form in HTML, è d’obbligo implementare una validazione dei dati inseriti (sia per verificare l’effettiva correttezza dei dati inseriti, sia per una questione di sicurezza). La validazione può essere realizzata lato client (tipicamente via JavaScript) o lato server. Nella mia esperienza, la soluzione migliore è quella di utilizzare un approccio ibrido: validazione lato client (via jQuery) e validazione lato server (tramite un linguaggio dipendente dall’applicazione realizzata); questo approccio garantisce una migliore distribuzione dell’onere di validazione, sia una maggiore robustezza del controllo (cosa succede se un browser non supporta/disabilita JavaScript?).
Attualmente, la migliore soluzione per la validazione lato client è quella di usare jQuery in combinazione con un plugin di validazione (io ho sempre utilizzato Validation). L’utilizzo del plugin è veramente semplice: basta dichiarare le regole di validazione (eventualmente usando una regexp) e chiamare il metodo validate() sulla form che vogliamo validare. Il plugin si preoccuperà di evidenziare con un bordo rosso i campi non correttamente validati, è offrirà la possibilità di inserire un messaggio custom per guidare l’utente nella corretta compilazione del campo.
Un approccio molto più recente, e adatto ai browser che già supportano HTML5, è quello di utilizzare la validazione nativa offerta dai componenti, ad esempio: il tag input, specificando il type implementa una validazione nativa in base al tipo passato come argomento, come ad esempio l’email.
<input type="email" name="email" size="20" maxlength="28">
In particolare segnalo l’attributo pattern che permette di specificare una regexp per la validazione (proprio come nel plugin per jQuery).
Per l’inserimento di eventuali messaggi di errore, si sfruttano le proprietà CSS3, vi rimando a questo interessante post per l’approfondimento.
La soluzione via HTML5 è senz’altro preferibile ma apre un problema di compatibilità: cosa succede con i browser più datati? Ancora una volta, un approccio ibrido sembra essere la soluzione ideale: jQuery per la validazione sui browser più datati e HTML5 per i browser più evoluti.