Corsi on-line

Validare email con HTML5, la scelta del pattern

Come è ormai noto HTML5 ha introdotto alcuni nuovi input type per i form tra cui anche email; se prima di questa versione del markup l’invio di un indirizzo di posta elettronica veniva affidato ad un comune input text, ora abbiamo a disposizione un costrutto specifico che però non manca di alcuni limiti, soprattutto in fase di validazione. email è infatti uno strumento incompleto e per poterne migliorare l’efficacia è necessario fare ricorso a espressioni regolari da associare ad un apposito pattern. Analizziamo il problema nello specifico.

html5 logoSi ipotizzi quindi di aver realizzato un modulo per il feedback contenente il seguente campo di input, da non dimenticare l’utilizzo dell’attributo required che permetterà di definire l’obbligatorietà di tale parametro già a livello di frontend:

<input type="email" name="email" id="email" required />

Fin qui tutto bene, se non fosse per il fatto che, nativamente, email non verifica né la presenza né la correttezza dell’estensione associata al nome di dominio; questo vuol dire che digitare “info@tuaemail.com”, cioè un esempio di forma corretta dell’indirizzo di posta elettronica,  “info@tuaemail.c”, “info@tuaemail.” o “info@email” produrrà comunque lo stesso risultato. Una lacuna estremamente rilevante dal punto di vista della validazione.

Come anticipato, è fortunatamente possibile definire un pattern, da passare come argomento all’omonimo attributo, con il quale specificare che l’account indicato dovrà contenere anche l’estensione. In Rete vengono suggeriti con regolarità alcuni pattern, come per esempio “[^ @]*@[^ @]” da utilizzare in questo modo:

<input id="email" name="email" pattern="[^ @]*@[^ @]" required="" type="email" />

Purtroppo questi pattern ignorano alcune casistiche, come per esempio la possibilità che l’estensione del nome a dominio sia composita (basterebbe pensare al gTLD “.co.uk”); nè è però disponibile un altro, più articolato, grazie al quale prevedere anche questo particolare tipo di suffissi:

<input type="email" name="email" id="email" pattern="[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" required />

Si tratta in sostanza di un pattern in grado di rispondere efficacemente a praticamente tutti i formati per le estensioni dei nomi a dominio, esso permetterà di completare la verifica a carico del parametro indicato dall’utente. Detto questo andrebbe però ricordato che questo tipo di controllo non mette al riparo da particolari tipologie di attacchi, si pensi per esempio ai tentativi di SQL Injection a carico dei form destinati ad inviare dati ad un database.

Gli input type come email possono essere utili per non dover ricorrere a soluzioni basate su JavaScript che potrebbero allungare i tempi di caricamento delle pagine Web, ma non rappresentano uno strumento destinato a filtrare gli input, procedura per la quale è sempre bene ricorrere alla validazione tramite applicazioni lato server.

Post correlati
I più letti del mese
Tematiche