Validare e inviare un form con JavaScript

20 marzo 2006

Una delle componenti che permette l’interazione fra utente e sito è il modulo per l’inserimento di dati (form), che si tratti di un modulo per l’invio di email, per la registrazione ad un servizio, di un questionario, di un guestbook, o utile per qualsiasi altra applicazione.

Lo sviluppatore di solito crea dei controlli che determinano la correttezza e la validità dei dati inseriti nei campi: per evitare scherzi, per evitare errori di persone distratte, o per “obbligare” l’utente interessato a compilare un campo.

Data la semplicità sintattica e concettuale dei linguaggi di programmazione orientati agli oggetti, che attualmente consentono lo sviluppo di sofisticati siti o applicazioni Web, è possibile creare i controlli in questione indifferentemente col linguaggio server-side che dovrà elaborare il modulo una volta soddisfatte tutte le richieste, o con un linguaggio client-side direttamente n locale.

Il mio consiglio, nonchè l’oggetto in questione, è quello di effettuare il controllo sui campi in modalità client-side utilizzando JavaScript.

Nell’articolo analizzeremo l’intero modulo HTML e lo script mentre nell’ultima pagina forniremo l’intero codice moderatamente commentato e pronto da copiare e incollare.

L’applicazione server-side

Immaginiamo di dover consentire ad un utente di aderire ad un servizio messo a disposizione dal nostro sito. Oggi come oggi i moduli con cui abbiamo maggiormente a che fare sono rappresentati dai servizi di email (registrazione di un account) e dai forum di discussione online.

Vediamo la struttura dell’operazione con una struttura server-side:

  1. Inviare una prima volta l’intero pacchetto di dati al server che effettuerà il controllo
  2. Ricevere dal server una pagina di errore che spiega cosa e come correggere
  3. Tornare indietro al modulo col rischio di perdere dai campi dati già inseriti e doverli reinserire
  4. Inviare di nuovo il pacchetto al server che, se soddisfatto, confermerà l’operazione, altrimenti…
  5. …torna al punto 1!!!

Ciò vuol dire andare incontro ad un dispendio di tempo e di risorse da parte dell’utente e personalmente al secondo errore che mi viene segnalato in questo modo mi annoio e desisto!

I vantaggi di JavaScript client-side

La mia opinione è che i vantaggi derivanti dall’esecuzione del controllo direttamente in locale con JavaScript derivano dalla velocità con cui un linguaggio client-side riesce a soddisfare delle richieste. JavaScript segnala instantaneamente all’utente gli errori, impedendo di andare avanti con la registrazione dei dati, fino ad inibire l’invio dei dati al server che dovrà limitarsi solo ad elaborarli.

Per creare un esempio valido si supponga, come predetto, di realizzare un modulo di registrazione ad un forum di discussione, ovviamente il codicè sarà presentato ed analizzato in maniera tale da poter agevolmente utilizzarlo per qualsiasi applicazione.

Se vuoi aggiornamenti su Validare e inviare un form con JavaScript inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Validare e inviare un form con JavaScript

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy