CSS  »  Articoli  »  CSS 3 

Dettagli aggiuntivi

L'evento invalid è un'altra funzionalità molto comoda. Sarà invocata dal campo quando esso è ancora non valido. Così possiamo attaccare ad esso una qualche forma di interazione e, nel nostro caso, modificare lo stile del campo affinché rifletta il suo stato.

Inoltre, il metodo checkValidity può essere eseguito su un campo individuale o su un form nel suo complesso, e può restituire true o false. Eseguire il metodo fa anche anche programmaticamente attivare l'evento invalid su tutti i campi non validi, oppure, se viene eseguito su un campo singolo, solo su quello.

Rivediamo la demo

Riprendiamo la nostra demo e miglioriamola con l'uso della API sulla validazione. Basandoci su quello che abbiamo appreso da Luke Wroblewski nel suo articolo La validazione inline dei form e sulle nostre esperienze, possiamo applicare queste idee al nostro modulo per creare un'esperienza di validazione ottimale.

La prima cosa che possiamo correggere è l'applicazione immediata dello stile di errore su un campo non valido. Piuttosto che applicare subito uno stile per indicare che l'utente non ha compilato il campo in modo corretto, aspettiamo fino a quando non si sposta dal campo per mostrare qualunque tipo di messaggio.

Se l'utente soddisfa i requisiti di compilazione mentre il focus è ancora su un certo campo, gli facciamo subito sapere che il campo è corretto e valido. Lo facciamo collegando l'evento input per verificare se se il campo è valido. Quando lo è, aggiorniamo lo stile perché il campo rifletta i cambiamenti.

Se il campo contiene valori non corretti e l'utente si sposta sul prossimo campo, l'evento blur verificherà la validità del campo e quindi applicherà gli stili di errore per far sapere all'utente che ha sbagliato qualcosa. Manterrà lo stile di errore fino a quando i requisiti non siano soddisfatti.

Cosa fare con i vecchi browser?

Tutti gli argomenti discussi sono piuttosto nuovi e il supporto sui vari browser, sebbene sia buono, non ci garantirebbe nel contesto di un ambiente di produzione rivolto al mondo reale, quello in cui dovremmo supportare tutti i browser. Ecco a cosa serve lo script che ho creato.

Per i browser che non supportano i form HTML5 e la API per la validazione, lo script emula quelle funzionalità. Per i browser che supportano queste funzionalità, lo script identifica il supporto e si affida alle funzionalità native. Diamo ora un'occhiata alla demo ulteriormente aggiornata con l'aggiunta del nuovo script. Provatelo con Firefox e IE per verificare che funziona esattamente come sui browser che supportano le funzionalità di validazione nativamente.

Supporto dei browser

Lo script è stato testato e funziona sui seguenti browser:

• IE6+
• Firefox 1+—FF4 avrà un supporto nativo.
• Chrome 4+—Supporto nativo.
• Safari 3.2+—Safari 5 ha un supporto nativo.
• Opera 9.6+—Supporto nativo.

Le seguenti funzionalità sono emulate nello script:

• ogni campo ha l'oggetto validity in modalità live e vi fornirà informazioni sullo stato corrente del campo;
• il metodo checkValidity è disponibile e indica se il form o uno specifico elemento non sono validi;
• sono supportati gli attributi pattern, placeholder, required, min, max e step;
• per le textarea sono supportati gli attributi placeholder e required;
• l'attributo required è supportato anche per i campi di tipo select;
• i tipi di input email e url sono verificati rispetto ad una espressione regolare integrata nel codice e saranno non validi fino a quando non siano conformi a tale espressione regolare.

Validazione in abbondanza!

Il supporto dei browser per i form HTML5 e per il modulo UI dei CSS3 sta iniziando ad essere più ampio. Opera 9 ha guidato la pattuglia implementando i Web Forms 2.0 prima che essi fossero incorporati nella specifica HTML5, ma ha un supporto per il modulo UI dei CSS3 solo a partire dalla versione 9.6. Chrome garantisce il supporto dalla versione 4, Safari ha implementato tutto di recente con la versione 5, Firefox introdurrà un supporto esteso con la versione 4.0, IE9, se continua sulla via intrepresa del progresso nel supporto degli standard, dovrebbe avere un supporto di base per queste funzionalità nelle prossime release.

Possiamo fare cose straordinarie con questi nuovi moduli di HTML5 e CSS3. Man mano che i browser allargheranno il supporto queste tecniche diventeranno un'alternativa effettiva che potrà adattarsi ai problemi semplici e complessi della validazione dei form.

Altri articoli

Altre guide

Altre newsletter