La validazione dei form è forse l'argomento relativo ai form più importante. Vediamo subito in dettaglio che cosa ci propone la nuova specifica HTML5.
required
required è un attributo booleano e serve a rendere obbligatoria la compilazione dell'elemento a cui è applicato. La condizione viene valutata al submit del form.
Ecco un esempio di utilizzo:
<form name="commenti" method="post" action="/141/comments">
[...]
<label>Messaggio:
<textarea name="messaggio" placeholder="Scrivi qui il tuo messaggio (max 300 caratteri)" maxlength="300" required></textarea>
</label>
[...]
<input type="reset" value="Resetta il form">
<input type="submit" value="Invia il commento">
</form>autocomplete
Anche se questo attributo non è esattamente un attributo per le validazioni, abbiamo deciso di inserirlo in questa lezione in quanto previene un comportamento dei browser non sempre voluto: spesso i browser riempiono i campi da inserire in maniera automatica.
Questo comportamento è nella maggior parte dei casi un comportamento comodo, però in alcuni casi è fastidioso. Si pensi per esempio ai campi password o ai campi del codice della banca: probabilmente non vogliamo che il browser li completi in automatico.
Ecco che arriva in nostro soccorso l'attributo autocomplete che è un attributo enumerato. In particolare i valori che accetta sono:
on: indica che il valore non è particolarmente sensibile e che il browser può compilarlo in maniera automatica;off: indica che il valore è particolarmente sensibile o con un tempo di scadenza (il codice di attivazione di un servizio, per esempio) e che quindi l'utente deve inserirlo manualmente ogni volta che lo compila;- nessun valore: indica in questo caso di usare il valore di default scelto dal browser (normalmente
on).
Ecco un esempio di utilizzo:
<form name="commenti" method="post" action="/141/comments">
[...]
<label>Nick:
<input type="text" name="nickname" autocomplete="on"
required pattern="[a-z]{1}[a-z_]{2,19}"
title="Un nickname è composto da lettere minuscole e '_'; Sono consentiti da 3 a 20 caratteri."
placeholder="your_nickname">
</label>
[...]
<input type="reset" value="Resetta il form">
<input type="submit" value="Invia il commento">
</form>multiple
In molti casi abbiamo bisogno che l'utente possa inserire più valori per lo stesso input (per esempio se gli stiamo chiedendo gli indirizzi e-mail di amici a cui inviare un invito).
Ecco che arriva in nostro soccorso l'attributo multiple che è un attributo booleano.
Un esempio di utilizzo:
<form>
<label>eMail a cui inviare l'invito:
<input type="email" multiple name="friendEmail"
</label>
[...]
<input type="reset" value="Resetta il form">
<input type="submit" value="Invia">
</form>pattern
In molti casi abbiamo bisogno di validare un determinato input verificando che il valore inserito sottostia a determinate regole di creazione (per esempio potremmo volere che il campo password non contenga spazi).
Possiamo contare in questi casi sull'attributo pattern.
Il valore di pattern, se specificato, deve essere una espressione regolare valida.
Se viene indicato l'attributo pattern bisognerebbe indicare anche il title per dare una descrizione del formato richiesto, altrimenti il messaggio di errore sarà generico e probabilmente di poco aiuto.
Ecco un esempio di utilizzo:
<form name="commenti" method="post" action="/141/comments">
[...]
<label>Nick:
<input type="text" name="nickname" autocomplete="on"
required pattern="[a-z]{1}[a-z_]{2,19}"
title="Un nickname è composto da lettere minuscole e '_'; Sono consentiti da 3 a 20 caratteri."
placeholder="your_nickname">
</label>
[...]
<input type="reset" value="Resetta il form">
<input type="submit" value="Invia il commento">
</form>In questo esempio si sta richiedendo che lo username sia una parola in minuscolo composta solo da lettere e da "_", di una lunghezza minima di 3 caratteri e massima di 20 e che non cominci con "_"
min e max
I valori min e max descrivono rispettivamente il valore minimo e massimo consentito.
Il valore di max deve essere maggiore del valore di min se indicato.
Questi attributi si applicano sia alle date (come detetime, date, month) sia ai numeri (number e range). Per maggiore dettagli rimandiamo alle lezioni che trattano in maniera specifica questi nuovi tipi di input.
Ecco un esempio di utilizzo:
<form name="commenti" method="post" action="/141/comments">
[...]
<label>Età:
<input type="number" name="age" min="13" max="130" step="1">
</label>
[...]
<input type="reset" value="Resetta il form">
<input type="submit" value="Invia il commento">
</form>In questo caso stiamo chiedendo un'età compresa tra i 13 e i 130 anni (estremi compresi).
step
Il valore step definisce la distanza che intercorre tra un valore e il successivo. Definisce, in altre parole, la granularità dei valori permessi.
Il valore di step deve essere un valore positivo non nullo.
Questo attributo si applica sia alle date (come detetime, date, month) sia ai numeri (number e range).
Ecco un esempio di utilizzo:
<form name="commenti" method="post" action="/141/comments">
[...]
<label>Età:
<input type="number" name="age" min="13" max="130" step="1">
</label>
[...]
<input type="reset" value="Resetta il form">
<input type="submit" value="Invia il commento">
</form>In questo caso stiamo chiedendo solo valori interi.
novalidate
Questo attributo si applica al tag form e permette di saltare tutte le validazioni dei tag che da esso discendono.
novalidate è un attributo booleano.
Ecco un esempio di utilizzo:
<form novalidate>
<label>Età:
<input type="email" name="myEmail" required>
</label>
<input type="reset" value="Resetta il form">
<input type="submit" value="Invia">
</form>In questo caso non verrà controllato che il campo email sia in un formato valido né che sia presente.
Tabella del supporto sui browser
| Form: nuovi attributi |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| autocomplete | No | No | No | No | 10.6+ |
| min, max | No | No | Nightly build | Nightly build | 9.0+ |
| multiple | No | 3.6+ | 4.0+ | 2.0+ | 11.0+ |
| pattern | No | 4.0+ | 4.0+ | 2.0+ | 9.0+ |
| required | No | 4.0+ | 4.0+ | 2.0+ | 9.0+ |
| step | No | No | 4.0+ | 2.0+ | 9.0+ |
