Le pseudo-classi :required , :invalid, :valid

In un form HTML5 è possibile rendere obbligatori i campi di un modulo web (form) usando l'attributo "required", inoltre e anche possibile definire la condizione affinchè il campo sia valido tramite l'attributo "pattern" .

Prendendo in considerazione il seguente form:

Codice HTML

 <form>
<fieldset>
<div class="form-group">
<label for="nome">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="">
</div>

<div class="form-group">
<label for="url">URL</label>
<input type="url" class="form-control" id="url" placeholder="Enter url" required="" pattern="https://.+">
</div>

<div class="form-group">
<label for="phone">Telefono</label> 
<input type="tel" class="form-control" id="phone" placeholder="Enter phone" required="" pattern="3.........+">
</div>

<button type="submit" class="btn btn-primary">Invia</button>
</fieldset>
</form>

tutti i campi sono resi obbligatori dall'attributo "required" , il campo URL ha la condizione che per essere valido deve contenere testo contenente "https://" e almeno un'altra lettera (" .+ "), il campo Telefono invece ha la condizione che per essere valido deve contenere un numero che inizi con 3 e abbia almeno altri 9 numeri (" .........+ ").
Fatto questo utilizzo questa immagine:

Codice CSS

 input:required:invalid, 
input:focus:invalid 
{ 
background-image: url(/images/validazione.png); 
background-position: right bottom; 
background-repeat: no-repeat; 
} 

input:required:valid 
{ 
background-image: url(/images/form_validation.png); 
background-position: right top; 
background-repeat: no-repeat; 
}

in pratica quando il campo richiesto non è valido (:required:invalid ) o è attivo e non valido (:focus:invalid) vengono eseguite delle condizioni, mentre se un campo richiesto è valido (:required:valid) vengono eseguite altre condizioni.

Demo