CSS  »  Articoli  »  CSS 3 

Questa è la traduzione dell'articolo Forward Thinking Form Validation di Ryan Seddon, pubblicato originariamente su A List Apart il 21 Settembre 2010. La traduzione viene qui presentata con il consenso dell'editore (A List Apart Magazine) e dell'autore.

La validazione dei form è sempre stata una questione problematica, sin dagli albori del web. All'inizio ci fu il messaggio di errore riassuntivo della validazione lato server. Poi siamo passati alla validazione lato client per verificare la correttezza della compilazione mentre l'utente riempie i vari campi. Ora siamo di fronte alla marcia trionfale di HTML5 e CSS3: il capitolo dedicato ai form della specifica HTML5 presenta nuovi tipi di input e di attributi che rendono possibile l'inserimento di specifici vincoli nella compilazione e nella conseguente validazione del modulo. Il modulo Basic UI dei CSS3 fornisce diverse pseudo-classi per aiutarci ad applicare degli stili ai diversi stati della validazione e a cambiare l'aspetto dei campi in base alle azioni degli utenti. Vediamo come combinare queste due tecnologie per creare un validatore di form basato sui CSS che abbia un ampio supporto sui browser attuali.

Più aiutiamo in tempo reale un utente a procedere nella compilazione di un form, meno probabile sarà l'eventualità che egli compia degli errori. Date un'occhiata all'esempio di validazione dei form con i CSS allegato a questo articolo in un browser che supporta le pseudo-classi Basic UI dei CSS3 (Chrome 4+, Safari 5+, Opera 9.6+). Ho usato queste pseudo-classi e gli attributi dei form di HTML5 per creare il tutto. Vediamo come funziona.

Pseudo-classi CSS3 per l'interfaccia utente

Il modulo UI presenta diverse pseudo-classi che aiutando ad applicare stili ai campi di un form in diversi stati:

• valid
• invalid
• required
• optional
• in-range
• out-of-range
• read-only
• read-write

Nella demo ho usato le pseudo-classi required, invalid e valid per implementare la validazione CSS:

input:focus:required:invalid {
  background: pink url(ico_validation.png) 379px 3px no-repeat;
}
input:required:valid {
  background-color: #fff;
  background-position: 379px -61px;
}

Dal momento che vogliamo solo specificare che un certo campo non è valido quando esso riceve il focus, usiamo la pseudo-classe focus per attivare lo stile che denota un campo non valido (ovviamente, segnalare come non validi tutti i campi obbligatori sin dall'inizio sarebbe una scelta di design poco azzeccata).

Spostando il focus su un campo obbligatorio che non sia valido attiviamo lo stile che visualizza il punto esclamativo, cosa che avvisa l'utente sul fatto che qualcosa deve essere inserito nel campo. Una volta che i vincoli di validazione siano stati soddisfatti, si attiva la pseudo-classe valid. Ora, rimuoviamo la pseudo-classe focus così che rimanga solo il segnale verde che indica un campo corretto.

Altri articoli

Altre guide

Altre newsletter