Il selettore :invalid ti consente di selezionare gli elementi <input> che non contengono un contenuto valido, che viene determinato dall’attributo type. Nella specifica dei Selettori CSS di Livello 3, :invalid viene definito come un “pseudo-selettore di validità”, questo significa che viene utilizzato per applicare delle regole di stile ad elementi interattivi in base all’input dell’utente.
Questo selettore viene utilizzato principalmente per fornire agli utenti un feedback mentre interagiscono con un form sulla pagina. Nel seguente esempio si applicano delle regole CSS per colorare il campo “email” di rosso o di verde, in base alla validità dell’input dell’utente, che deve seguire la struttura valida di un indirizzo email:
Osserva come il primo campo rimanga verde (quindi contenuto valido) anche se non è inserito nulla al suo interno. Questo è perché il campo è opzionale, quindi lasciandolo bianco si potrebbe comunque inviare il form. Per risolvere questo problema, il secondo campo ha l’attributo required impostato a true, rendendo la compilazione obbligatoria per poter inviare il modulo.
Il selettore :invalid può essere concatenato con altri pseudo-selettori come :focus per validare l’input solamente mentre l’utente lo sta scrivendo. Con :before e :after si possono aggiungere icone o testi per fornire all’utente un feedback ulteriore. Si possono utilizzare anche selettori come input[value=""] per validare solamente campi di input con un determinato contenuto.