Un riepilogo delle pseudoclassi

Una pseudoclasse è un'informazione su un elemento presente nella struttura ad albero del documento ma non disponibile tramite attributi specificati. Ad esempio, la ps eudoclasse : first-child si applica agli elementi che sono il primo figlio dei loro genitori. È possibile ottenere tali informazioni dall'albero DOM, ma non esiste un attributo first-child.

In CSS2.1 erano disponibili una manciata di pseudoclassi, in particolare gli stati di collegamento (:lin k, :visited) e quelli delle azioni dell'utent e (:acti v e,:hove r). In CSS3, quella manciata diventa un cesto, con pseudoclassi di struttura (:nth-chil d, :nth-of- typ e), elemento dell'interfaccia utente ( :e nabled, : checked) e quelle che vedremo ora, di convalida del modulo.

Convalida dei form senza JavaScript

Quindi, come ho detto all'inizio, HTML5 introduce la convalida del modulo sul lato client senza la necessità di JavaScript. Quando si tenta di inviare un modulo, il browser convaliderà tutti i campi e restituirà un errore se uno dei campi non è corretto. Ciò accadrà principalmente automaticamente, a condizione che il browser ne abbia la capacità, e sarà simile a quello mostrato nella figura 1:

Questi messaggi di errore sono specifici del browser e del sistema operativo e difficili da modificare (che ho documentato sul mio blog), ma è possibile modificare il modo in cui gli errori vengono visualizzati sugli elementi stessi con le nuove pseudoclassi di convalida, che fanno parte del modulo dell'interfaccia utente di base CSS3.

Coprirò l'attuale supporto del browser mentre andiamo attraverso l'articolo, ma in poche parole:

• Firefox e IE10 ne supportano alcuni.
• Opera e Chrome supportano tutto.
• Safari supporta anche tutto, ma la convalida del modulo è disabilitata per impostazione predefinita.

Detto questo, consiglierei di usare Chrome, Opera o Safari per visualizzare gli esempi che ti mostrerò.

Se vuoi tenerti aggiornato con il supporto del browser per la convalida dei form, ti suggerisco di tenere d'occhio Quando posso usare.

Quindi, con tutto il noioso soffio tecnico fuori dai fatti, andiamo avanti con l'interessante guff tecnico e diamo un'occhiata ad alcuni esempi di convalida del modulo.

Elementi obbligatori e facoltativi

Uno dei modelli più comuni di convalida è quello dei valori obbligatori (cioè obbligatori), ovvero i campi che l'utente deve completare per progredire. Per contrassegnare un elemento del modulo come obbligatorio, è necessario aggiung ervi solo l 'attributo obbligatorio:

<input type="text" required>

Se si desidera applicare stili a questo per mostrare tale requisito, è possibile utilizzare la nuova pse udoclasse :required, che applica regole a qualsiasi elemento abbinato con l' attribut o richiesto. Ad esempio, è possibile inserire un asterisco dopo il testo dell'etichetta:

input:required + label::after { contenuto: "*"; }

Le regole esatte usate dipendono dal modo in cui è stato contrassegnato il documento. La regola in questo esempio si basa sul markup con questa struttura:

<input type="text" required id="foo">
<label for="foo">Foo</label>

L'opposto del richiesto è, ovviamente, facoltativo. E non lo saprete, abbiamo una pseudo-classe anche per questo, logicamente chiamata :opzional e. Influisce su qualsiasi elemento del modulo che non dispone di un attributo obbligatorio. Ad esempio, potresti voler fare in modo che abbiano un bordo più leggero:

input:facoltativo { colore bordo: argento; }

È possibile vederlo in azione nella figura 2 o dare un'occhiata a un esempio dal vivo.

Elementi validi e non validi

Esistono altri tipi di convalida oltre semplicemente "obbligatorio" o "facoltativo". È possibile utilizzare la corrispondenza dei modelli, ad esempio la convalida dell'indirizzo di posta elettronica:

<input type="email">

Se l'utente immette qualcosa nel campo, deve corrispondere al modello di un indirizzo e-mail, altrimenti verrà contrassegnato come non valido. (Naturalmente, se non è necessario, allora può essere lasciato vuoto.)

È possibile eseguire lo stile di elementi modulo validi o non validi utilizzando pseudoclassi chiamate , atten derlo, : valid e :invali d. È possibile aggiungere un simbolo a seconda dello stato di convalida:

input:invalid + label::after { content: ' ⨉'; } input:valid + label::after { content: ' ✓'; }

Si noti che questi avranno effetto non appena la pagina viene caricata, quindi probabilmente vorrai usare JavaScript per applicarli solo dopo l'invio, magari aggiungendo una classe al form con JavaScript:

document.forms[0].addEventListener('submit', function(e) { e.currentTarget.classList.add('submitted');   Funzione di convalida del modulo di fallback });

Lo script esatto utilizzato varierà, ma comunque lo fai, puoi usare quella classe per stiliare gli elementi del modulo, in questo modo:

.submitted input:invalid + label::after { content: ' ⨉'; }

La figura 3 mostra l'output di questo e puoi anche vedere l'esempio dal vivo.

Due cose extra da notare su questo esempio: in primo luogo, per usare il mio JavaScript, ho impedito al modulo di convalidare automaticamente utilizzando l'attributo novalidate sul pulsante di invio; e in secondo luogo, Firefox mette un bagliore colorato intorno agli elementi a seconda del loro stato di convalida, che ho sovra-governato usando il loro selettore pr oprietario :-moz- ui-invalid. Visualizza l'origine della demo per vedere come vengono utilizzati.

Intervalli di numeri

Alcuni dei nuovi tipi di input, ad esempio il n umero, consentono un intervallo di valori utilizzando gli attri buti min e max, in questo modo:

<input type="number" max="10" min="1">

Sebbene i controlli modulo impediscano in genere all'utente di immettere un valore al di fuori di questo intervallo, potrebbero esserci occasioni (ad esempio quando JavaScript viene utilizzato per fornire valori) in cui il valore fornito all'input supera l'intervallo:

<input type="number" max="10" min="1" value="11">

In questo caso, è possibile utilizzare la pseudoclasse :out-of-range per il proprio stile:

input[type='number']:out-of-range { border-color: rosso; }

E, come ci si aspetterebbe, c'è una controparte conosciuta con il nome di:in-rang e:

input[type='number']:in-range { colore bordo: verde; }

Nella figura 4 è possibile visualizzare queste due pseudoclassi al lavoro e ancora una volta c'è anche un esempio dal vivo da visualizzare.

Lettura e scrittura

È possibile che si abbia un campo modulo precompilati con un valore che non si desidera che l'utente sia in grado di modificare, ad esempio termini e condizioni in un'ar ea di test o. In tal caso, è possibile aggiungere l 'attribu to readonly:

<textarea readonly="">Lorem ipsum</textarea>

È possibile applicare elementi di stile a cui è appli cato l'attri buto di sola lettura, utilizzando… riesci a indovinare? Hai ragione, lettore immaginato: la pse udoclasse d i sola lettura. È possibile combinarlo con l a propriet à CSSuser-select per impedire all'utente di selezionare il testo (nell'esempio, ho anche modificato lo stile del bordo per renderlo più ovvio):

textarea:sola lettura { selezione utente: nessuna; }

E se ne hai bisogno, c'è ovviamente una pseudo classe di l ettura-scrittura per elementi a cui non è applicato l'attributo:

textarea:lettura-scrittura { selezione utente: testo; }

È possibile visualizzare i risultati nella figura 5 e, come prima, c'è anche un esempio dal vivo.

Firefox e IE10 hanno effettivamente implementato l 'attribu to readonly, ma non hanno ancora il supporto per queste pseudoclassi.