Come abbiamo visto nello script precedente, HTML5 introduce diverse novità nell'ambito delle form. Una di queste, tradizionalmente demandata a codice client side e server side, è la validazione dei dati.

In tal senso, HTML5 introduce un insieme di nuovi attributi sui tag legati alle form, come ad esempio required:

<input type="url" required="true" />

L'effetto che scatena l'attributo è di rendere obbligatorio il campo: il browser, da parte sua, eviterà il submit della form a cui è associato se il campo non è compilato correttamente. Il messaggio di errore visualizzato, purtroppo, non può essere cambiato e il comportamente dipende dal browser. E' supportato da IE10+, Chrome5+, Firefox 4+, Safari 5+ e Opera 9.5+.

In alcuni casi è necessario aggiungere un controllo più complesso: questo è possibile grazie all'utilizzo dell'attributo pattern, che accetta una regular expression su cui effettuare la convalida del dato.

Indica un nome (da 3 a 9 caratteri alfanumerici):
<input required="true" pattern="[0-9][A-Z][a-z]{3,9}" name="product" type="text"/>

E' possibile gestire lo stile associato ai campi attraversi due selettori, come in questo esempio:

:invalid {
    border-color:#f00;
}

:valid {
    border-color:#0f0;
}

Il primo applicherà un bordo rosso a tutti i campi non validi, il secondo uno verde, aiutando l'utente a capire quali campi necessitano di essere controllati.

Infine, particolarmente utile in questi casi può essere l'utilizzo della proprietà placeholder, che mostra un testo che sparisce automaticamente quando l'utente ha il focus del campo o inserisce del testo:

Sito: <input type="url" name="site" placeholder="http://" />

L'uso di questi nuovi tipi di input non ha effetti negativi sui browser che non li supportano: semplicemente, in questi casi le nuove feature verranno ignorate. Per questo motivo, è suggeribile comunque effettuare tutti i controlli di validità dei campi lato server.