JavaScript  »  Articoli  »  Effetti e controlli Javascript 

La validazione dei dati immessi dall'utente in un form è sempre problematica; verificare ciò che egli ha digitato in determinati campi risulta essere un'operazione spesso noiosa e frustrante sia per lo sviluppatore sia per l'utente stesso.

Basti pensare alle migliaia di form sparsi per il web, spesso composti di decine di campi e che consentono, per esempio, l'iscrizione a corsi, seminari, forum, etc., ma che per un banale errore di digitazione ripresentano i campi da correggere segnalati in rosso o, addirittura, la ricompilazione di tutti i campi. Per fortuna ci viene in aiuto la validazione client-side con l'ausilio di Javascript. Vediamo in pochi step di cosa si tratta:

• L'utente inserisce delle informazioni in un modulo
• Dopo aver completato la compilazione, invia tutto al server
• Prima che le informazioni arrivino al server è richiamata una funzione Javascript gestita dal browser che si occuperà di validare l'input dell'utente
• Qualora tutti i campi risultino conformi alle regole impostate dal programmatore, i dati procederanno verso il server per una verifica più approfondita e sicura. Altrimenti all'utente sarà inviato un messaggio Javascript per segnalare l'errore, così che possa correggerlo e proseguire correttamente con l'invio

Questo tipo di approccio presenta vantaggi e svantaggi; sarà quindi utile valutare l'uso che se ne dovrà fare e analizzare l'importanza delle informazioni che si dovranno trattare (es. dati bancari).

Vantaggi:

• L'utente ha in tempo reale un controllo sui valori inseriti nel campo
• Non vengono sprecate risorse per inviare al server informazioni non corrette che dovranno poi essere riprocessate

Svantaggi:

• Per usufruire di questo tipo di validazione il browser deve avere abilitato il supporto a Javascript
• I dati inviati al server devono subire un ulteriore controllo per accertare la corretta integrità del dato

L'esempio che analizzeremo insieme viene in aiuto agli sviluppatori e agli utenti fornendo ai primi uno strumento flessibile e dinamico per il controllo dei dati inseriti e ai secondi uno strumento utile che farà risparmiare tempo nella compilazione di form complessi.

Per far questo ho creato un normale form di registrazione composto da svariati campi (nome, cognome, indirizzo, telefono, cellulare, note, preferenze); per ognuno di essi ho predisposto degli attributi aggiuntivi che prenderanno vita successivamente con l'ausilio di una funzione Javascript opportunamente integrata.

Scendiamo nel dettaglio, ecco la lista degli attributi da me aggiunti:

• Obbligatorio [1|0]: stabilisce se il campo è obbligatorio o meno (es. se il campo è obbligatorio, il suo valore deve essere diverso da vuoto).
• Dato[char|int]: stabilisce il contenuto del campo; se il contenuto di un campo è char il campo potrà contenere solo stringhe alfanumeriche, altrimenti se il campo è int potrà contenere solo numeri interi positivi/corretti.
• Regex[pattern regex]: permette di validare il contenuto di un campo in base ad un'espressione regolare.
• Msg_errore[stringa]: messaggio che visualizza l'utente tramite un alert Javascript se il valore inserito nel campo non è conforme alle regole specificate dagli altri attributi.

Altri articoli

Altre guide

Altre newsletter