Validazione dei form in HTML

In genere è sempre buona norma validare i dati di un form sia lato server che lato client.

Per quanto riguarda il client, ci siamo sempre avvalsi di Javascript (o di uno dei milioni plugin per jQuery).

Ma con HTML 5 possiamo farne a meno.

Anche se il supporto dei browser non è al 100%, ci rimane comunque la parte server; quindi, per quanto mi riguarda, preferisco evitare l'uso dei plugin o di Javascript per fare questo (almeno quando possibile).

Anche perchè il supporto dei browser sta migliorando, e quindi perchè non portarsi avanti con il lavoro?

Bene, oggi vediamo qualche esempio.

La prima cosa che vederemo è l'attributo required:

       <form>
            <input type="text" value="" required>
            <button type="submit">Invia</button>
        </form>

Se provate ad inviare il form senza aver scritto nulla, comparirà un messaggio, ed il form non verrà inviato.

In questo caso, però, non verranno controllati gli spazi; quindi se come valore mettete solo spazi, il forma verrà coumunque inviato.

Per eseguire anche questo controllo possiamo usare l'attributo pattern, e una regex per indicare cosa controllare:

        <form>
            <input type="text" value="" required pattern="[A-Za-z0-9]{1,20}">
            <button type="submit">Invia</button>
        </form>

Ovviamente pattern può fare molto più di questo; possiamo anche impostare solo alcuni valori ammessi:

        <form>
            <input type="text" value="" required pattern="roma|barcellona">
            <button type="submit">Invia</button>
        </form>

Inoltre sono stati creati una serie di input specifici per vari tipi di dati:

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

Non tutti godono ancora della massima compatibilità; però alcuni sono interessanti.

Ad esempio il campo date mostra un calendario per scegliere la data (non ancora diposnibile in Firefox però):

        <form>
            <input type="date" value="" required>
            <button type="submit">Invia</button>
        </form>

In Chrome vedreste un campo in mettere una data; in Firefox diventa un semplice campo di testo.

Carino è anche il tipo color, che mostra un popup per scegliere un colore (tipo color-picker per intenderci):

        <form>
            <input type="color">
            <button type="submit">Invia</button>
        </form>

Qui potete vedere una pagina con descrizioni più dettagliate.

Se non fosse per Firefox, carente nei campi data e tempo, avrei fatto la validazione 100% HTML.

Speriamo che Firefox riempia presto questa mancanza.

Enjoy!