Validare una form – Parte 5

Ultimo appuntamento sull’argomento su come validare una ...

Ultimo appuntamento sull’argomento su come validare una form html5 con l’uso delle pseudo classi.

Tooltips

Quando inviamo un modulo di una form non compilato correttamente, viene visualizzata una finestra popup. Impostando l’attributo “titolo” dei campi, possiamo aggiungere ulteriori suggerimenti su quali valori devono essere inseriti per fare in modo che la convalida vada a buon fine.

I diversi browser visualizzano i pop-up diversamente: in Chrome, il valore dell’attributo titolo apparirà sotto il testo principale del messaggio di errore in caratteri più piccoli. In Firefox non mostra il tuo testo tooltip personalizzato, a meno chenon si sia usato anche l’attributo “pattern”.

<input type="text" name="name" title="Please enter your user name.">

Le caselle di errore o il loro contenuto predefinito non possono essere modificati con i css ma richiedono l’aiuto di JavaScript.

Pattern

L’attributo “pattern” consente agli sviluppatori di impostare un’espressione regolare, che il browser confronta con l’input fornito dall’utente, prima di convalidare il modulo. Questo ci consente un ottimo controllo sui dati, poiché i pattern RegEx possono essere abbastanza complessi e precisi.

<input type="email" name="email" required pattern="^\S+@\S+\.\S+$" title="[email protected]">

Con questo esempio ( con la possibilità di filtrare i valori di input), il nostro modulo  accetta solo indirizzi email completi .

Con questo esempio concludiamo i suggerimenti per utilizzare le funzioni di convalida di HTML5.

Kenji Agency : realizzazione  siti web a Treviso