Come validare un form con JavaScript

Al fine di rendere più interessante ed accattivante un sito, colui che si occupa della sua realizzazione, deve essere capace di rendere la pagina web il più interattiva possibile in modo che, l'utente possa "interagire" con i suoi contenuti. Uno dei tanti elementi per rendere possibile ciò è il cosidetto "Form". In questo tutorial descriveremo come validare un Form con Javascript.

Prima di passare al punto cruciale del tutorial è conveniente spiegare cos'è un "Form". Per coloro che, si sono avvicinati da poco all'incredibile mondo di internet e di Javascript, immaginaimo il "Form" come una scheda da compilare che, permette all'utente di inserire i dati in modo da registrarsi ad un servizio o per inviare una mail oppure per rispondere ad un questionario o semplicemente per lasciare un commento all'interno della pagina.

Prendiamo in considerazione un form che permette all'utente di registrarsi ad un servizio. I dati che solitamente vengono richiesti sono: nome, cognome, data di nascita, mail, password, nikname. Su ognuno di questi dati bisogna fare dei controlli se pur minimi al fine di rendere l'operazione valida. È consigliabile per far ciò usare un linguaggio "client-server". Nel dettaglio tale linguaggio definisce la struttura delle operazioni che vi sono dietro un "form" vale a dire: 1. Inviare i dati al server; 2. Il server recepisce i dati e restituisce una pagina di errore se l'utente ha sbagliato a compilare i campi; 3. Torna indietro dalla pagina per ricompilare il "form" correttamente; 4. Invio dei nuovi dati.

Distinguiamo i dati tra campi di testo e non. I campi che riguardano: nome, cognome, nickname sono dati di testo. L' unico controllo che necessitano questi campi è che non rimangano vuoti. Prendiamo in considerazione il campo "nome", la prima cosa da fare è quella di assegnare alla variabile "nome" il valore che, l'utente inserisce nel campo associato al "form", attraverso il seguente codice: "var nome = document. Modulo. Nome. Value". Dopodichè, attraverso un "ciclo if" (cosi come riportato nell'immagine) impediamo che l'utente lasci il campo vuoto.

Sicuramente i "form" più usati richiedono l'inserimento di un'indirizzo mail, anche in questo caso bisogna fare un controllo, diverso dal precendente, in quanto non possiamo considerare tale campo come, un semplice campo di testo, questo perché, l'indirizzo che dobbiamo inserire deve rispettare un'espressione corretta. Assegnamo, come fatto precendemente, una variabile al campo "mail", in questo modo: "var email_reg_exp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-z0--9\-]{2,})+\.)+([a- zA-z0-9]{2,})+$/". Questa variabile verrà usata in un "ciclo if" per evitare che l'utente lasci il campo vuoto (come riportato nella prima parte dell'immagine).

Sui campi non di testo, come ad esempio quello relativo alla "data di nascita", il controllo che bisogna fare è quello che guidi l'utente di inserire il dato nel formato giusto (gg/mm/aa) e che venga inserita una data esistente; non possiamo digitare date del tipo : 50/13/2050. Nell'immagine mostreremo come procedere per evitare tutto ciò. Se procediamo come illustrato l'utente sarà perfettamente guidato nell'inserimento dei dati in modo da non avere problemi.

• Foto:

• Come disabilitare JavaScript
• Come abilitare JavaScript su Firefox