MICHELEPISANI.IT

Guida HTML5

Validare un form senza Javascript e sfruttare i nuovi attributi HTML5

La validazione dei form e i nuovi attributi

Agosto 21
07:042014

L'HTML5 rivoluziona in modo notevole la gestione dei form, soprattutto introduce delle innovative agevolazioni per quanto riguarda la validazione dei campi dopo il submit da parte dell'utente. Essa non sarà più gestita separatamente, dallo sviluppatore, con il Javascript ma sarà nativa del browser che interpreta gli attributi assegnati ai campi del form (l'attributo type può assumere nuovi valori oltre a text, password ed image) e valida oltre che per l'obbligatorietà del campo anche per il formato in cui il contenuto dello stesso è stato scritto. Ad esempio un campo di input può essere type="email" (invece che semplicemente type="text") e una volta cliccato sull'invio del form il browser effettua direttamente un controllo sul valore di quel campo restituendo eventualmente un'etichetta con un messaggio che invita a controllare l'indirizzo email inserito qualora non rispettasse il formato corretto, liberando così lo sviluppatore dal dover creare una funzione ad hoc o una regexp per il controllo della validazione di un indirizzo email, e lo stesso vale per altri tipi di campo come ad esempio per l'inserimento di una data (type="date"). Ma l'HTML5 non si ferma qui e pensa anche alle interazioni con i dispositivi mobili per cui, ad esempio, per un campo che richiede l'inserimento di un numero di telefono c'è la possibilità di assegnare l'attributo tel (type="tel") che non guarda alla validazione ma fa si che al focus sul campo si apra, su uno smartphone o un tablet, la tastiera personalizzata all'inserimento di numeri e simboli solitamente usati per i numeri di telefono, questo vale anche per lo stesso type=email (dove uno dei simboli che saranno mostrati nella tastiera sarà sicuramente la "@") ed altri che comunque verranno ripresi successivamente.

Non solo l'HTM5 rivoluziona il valore di alcuni attributi, come anticipato per l'attributo type, ma ne introduce di nuovi e tra questi a mio avviso quello che ha maggior rilevanza, non a caso è molto utilizzato (anche perchè è supportato praticamente da tutti i browser da tempo), è placeholder, esso aiuta l'utente a completare il campo in quanto il suo valore, venendo visualizzato nei campi di input o textarea vuoti o che non hanno il focus, suggerisce cosa inserire o il modo in cui l'informazione deve essere inserita.
Nell'immagine di esempio, Fig. 1, che mostra il form per la registrazione alla newsletter (presente dal vivo nella colonna destra di questo blog) è possibile notare l'effetto che l'attributo placeholder ha sui campi di tipo text.

HTML5 - Esempio del risultato dell'utilizzo dell'attributo placeholder nei campi di testo

Fig. 1 - HTML5 - Esempio del risultato dell'utilizzo dell'attributo placeholder nei campi di testo


Il codice del form (modificato per adattarlo alla discussione in oggetto) è qualcosa simile a questo:

<form action="#" method="post" novalidate="false">
  <p>
    <label for="nome">Nome:</label>
    <input type="text" name="nome" id="nome" value="" placeholder="Il tuo nome" tabindex="1" autofocus="true" />
  </p>
  <p>
    <label for="cognome">Cognome:</label>
    <input type="text" name="cognome" id="cognome" value="" placeholder="Il tuo cognome" tabindex="2" pattern="[a-zA-Z ]{2,50}" title="il cognome deve essere composto da 2 a 50 caratteri, formato di sole lettere maiuscole e minuscole ed eventualmente da spazi" />
  </p>
  <p>
    <label for="email">E-mail:*</label>
    <input type="email" name="email" id="email" value="" placeholder="es. email@mail.me" required tabindex="3" />
  </p>
  [...]
</form>


Oltre alla presenza dell'attributo type="email" e del placeholder è possibile notare, nel codice di cui sopra, un altro nuovo attributo inserito nel primo campo di input, ossia autofocus. Esso se impostato su true fa si che al caricamento della pagina il focus sia posizionato su quel determinato campo, va da se che ne può esistere solo uno su un solo campo in un'intera pagina.
Nel campo email ho inserito un altro attributo, required, nella sua forma sintetica per ricordare che per alcuni attributi la sola presenza fornisce implicitamente il suo valore. Come intuibile questo attributo rende il campo obbligatorio per poter effettuare il submit del form.
Nel secondo campo ho inserito un pattern per validare (con una regular expression) in maniera più restrittiva il campo, da notare l'aggiunta di un title descrittivo per evitare che venga eventualmente fornito un errore generico fuorviante per gli utenti.
Nel tag form ho inserito un attributo chiamato novalidate, l'ho impostato a false e quindi non ha effetto (in questo caso infatti la sua presenza è obsoleta ma è inserito solo a scopo illustrativo) ma se fosse settato su true disattiverebbe in automatico tutte le validazioni dei campi al suo interno.
Esistono altri attributi non mostrati nell'esempio di codice ma che sono comunque degni di nota, tra di essi, abbiamo già menzionato nell'articolo precedente gli attributi min e max ma non l'attributo step che indica in determinati tipi di campo la distanza minima tra un valore ed il valore successivo o precedente che il campo può assumere.

Nel prossimo articolo saranno approfonditi i tipi di valore che può assumere l'attributo type nei campi di input e l'effetto che essi hanno dal punto di vista funzionale e visivo.

 

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao alessandro,
questa regex dovrebbe fare al caso tuo:

alessandro

ciao sto cercando una regex per numeri interi o decimali, positivi o negativi; la tua regex mi pare …

Michele Pisani

Ciao Nicola,
ti riferisci per caso alla situazione di gianluigi?
In tutti i casi la via …

Nicola

Ciao Michele, mi trovo nella medesima situazione in cui si trovava Gianluca un anno fa. Sei poi …