Controllo dell'input in un form HTML con JQuery (o con JavaScript )

In una web application gli utenti sono spesso chiamati a fornire dei dati attraverso la compilazione di un modulo

Il controllo della validità dei dati può essere fatto quando il modulo viene inviato per l'elaborazione (evento submit) oppure impedendo, durante la fase di inserimento, l'accettazione di caratteri che formano un input non valido. Se ad esempio si deve fornire un numero compreso tra 0 e 255, l'applicazione può accettare qualsiasi tipo di input, anche ad esempio una stringa di lettere, e controllare la validità dei dati immessi nei campi del form sull'evento submit(), prima che essi vengano elaborati; oppure può rifiutare, durante l'inserimento, la digitazione dei caratteri non numerici o dei caratteri numerici che formano un numero non compreso nell'intervallo [0:255] desiderato.

E' evidente che la seconda tecnica è più elegante e risulta preferibile alla prima. Sicuramente rappresenta una buona pratica di programmazione che si dovrebbe sempre adottare per realizzare applicazioni affidabili, corrette e funzionali.

Il controllo di validità dell'input è stato utilizzato, con i linguaggi di programmazione Visual C#, Visual Basic e Java, in altri lavori pubblicati nell'Area Download.

In questo esercizio prendiamo in esame un semplice modulo HTML composto da 2 campi: Nome e Matricola. Il campo Nome, di lunghezza massima 30 caratteri, può contenere solo lettere maiuscole e minuscole, il campo Matricola deve essere numero compreso tra 1 e 2000. l controllo di validità dei campi durante l'inserimento, viene fatto sull'evento onkeypress() dei campi del modulo, chiamando una funzione JQuery (Soluzione 1) oppure chiamando una funzione JavaScript (Soluzione 2).

Purtroppo alcuni browser Android non supportano l'evento JavaScript  'keypress': in questi casi il controllo di validità non risulta efficace.

Va detto che il controllo dell'input è diventato abbastanza complesso perchè nei dispositivi moderni,  oltre la tastiera, reale o virtuale che sia, ci sono altri modi per "inserire qualcosa" (specialmente su smartphjone e tablet).  Ad  esempio, molti utenti  utilizzano  il riconoscimento vocale  oppure  il copia  e  incolla.  Sempre più spesso, quindi,  per realizzare un efficace controllo dei dati che vengono forniti in input non basta prendere in considerazione gli eventi della tastiera.

 

Prova il codice

Scarica Soluzione 1 (JQuery)

Scarica Soluzione 2 (JavaScript)

Pagina Download