Come validare un form con JavaScript

tramite: O2O
Difficoltà: media
17

Introduzione

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.

27

Tutorial

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.

37

I dati

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.

Continua la lettura
47

I campi di testo

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.

57

I form

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).

67

Data di nascita

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.

77

Consigli

Alcuni link che potrebbero esserti utili:

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Internet

Come creare un form in HTML

Il linguaggio di programmazione maggiormente adoperato è sicuramente l'HyperText Markup Language (HTML). Per formare un'interfaccia ...
Programmazione

Come mandare una mail in PHP

Mandare un mail in PHP per un programmatore abbastanza pratico del linguaggio in Html è molto semplice e intuitivo, essendo presente la funzione mail apposita ...
Programmazione

Come mandare una mail in PHP

Inviare un'email in PHP, per un programmatore abbastanza pratico del linguaggio in HTML, è un'operazione abbastanza semplice ed intuitivo. Questo è possibile in ...
Sicurezza

Come navigare in sicurezza con Mozilla Firefox

Mozilla Firefox è uno dei tanti browser di navigazione internet disponibili in circolazione, assolutamente gratuito e sempre aggiornato. Si colloca tra i migliori, soprattutto per ...
Internet

Come creare un modulo di contatti su Wordpress

Prima di spiegare come creare un modulo di contatti su Wordpress, vorrei descrivere cosa in realtà è Wordpress. Stiamo parlando di una piattaforma software di ...
Internet

Come si inserisce il pulsante Mi Piace di Facebook sul proprio blog

Ecco una semplicissima e pratica guida su come si inserisce il pulsante Mi Piace di Facebook sul proprio blog. Visto l'importanza di questo semplice ...
Programmazione

Come iniziare con JSON

Sia che siate degli studenti o dei programmatori di lungo corso sicuramente conoscerete la sigla Json che sta per JavaScript Object Nation. SI tratta infatti ...
Internet

5 consigli per creare una landing page

Una landing page, letteralmente "pagina di atterraggio", è una pagina web su cui l'utente viene indirizzato che consente di catturare una serie di informazioni ...
Programmazione

Come usare i RadioButton in Java

In questa guida vedremo come utilizzare i radiobutton in Java. Esistono dei pulsanti di opzione (javax.swing. JRadioButton) che vengono usati in gruppi (java.awt ...
Windows

Come impostare il programma di posta elettronica

I client di posta elettronica sono dei software realizzati per aiutare gli utenti nella gestione, la composizione e l'organizzazione delle e-mail. I vari sistemi ...
Internet

Come registrarsi sul portale Libero.it ed attivare una casella e-mail

Tra i tanti portali web, uno dei più conosciuti è sicuramente quello di Libero. Basta registrarsi gratuitamente al portale e avrai la possibilità di attivare ...
Internet

Come creare un modulo di contatti su Wordpress

Prima di spiegare come creare un modulo di contatti su Wordpress, vediamo di cosa si tratta. Parliamo di un software di personal publishing e content ...
Windows

Come Creare Un Report

Ogni lavoro che necessita di una relazione dettagliata, ha bisogno di un report. È possibile realizzarlo in tanti modi, anche in base al tipo di ...
Windows

Come compilare moduli online e salvare password con RoboForm

Spesso quando si naviga su internet, per loggarsi nei vari account a cui si è registrati, è necessario compilare manualmente dei form. Il che, può ...
Programmazione

Come generare numeri casuali in Javascript

Javascript è comunemente utilizzato per la programmazione Web, per la creazione di siti internet e applicazioni web, e ha la caratteristica di poter generare degli ...
Programmazione

Guida alla programmazione in Delphi

La programmazione ha un campo di lavoro veramente ampio, infatti nel corso degli anni sono stati inventati diversi tipi di linguaggi di programmazione, da quello ...
Programmazione

Come usare i RadioButton in Java

In questa guida vedremo come usare i radiobutton in Java. Esistono dei pulsanti di opzione (javax.swing. JRadioButton) che vengono usati in gruppi (java.awt ...
Programmazione

Come generare dei codici captcha con PHP

Il PHP è un linguaggio di programmazione, utilizzato prevalentemente per i siti web interattivi e per la creazione di maschere per la registrazione dei dati ...
Internet

Come costruire una lista di indirizzi e-mail

Le mail costituiscono ormai il mezzo più veloce di comunicazione virtuale, in quanto permettono agli utenti di scambiare dati a costo zero. Infatti, ormai le ...
Programmazione

Errori da non commettere nell'uso di Javascript

Javascript è un linguaggio informatico utilizzato nella programmazione web lato client, per la creazione di siti e applicazioni con effetti dinamici e interattivi, tramite funzioni ...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer»”.