HTML and CSS Reference
In-Depth Information
cus:invalid
). La
figura 3.11
mostra il risultato che otteniamo applicando queste nuove
funzionalità.
L'aggiunta di questa proprietà fa scattare il meccanismo di validazione sull'intera form.
In caso contrario, la form invia normalmente i dati che contiene. Seppure interessante, que-
sta tecnica ha il limite che non possiamo specificare il formato dei valori accettati dal cam-
po. Vediamo, quindi, come fare un salto avanti in tal senso.
Figura 3.11
- Possiamo notare i diversi colori applicati ai vari stati in cui si trovano gli
elementi della form.
In molti casi non basta assolutamente richiedere che un campo sia obbligatorio perché, per
esempio, ci aspettiamo che il valore che contiene rispetti criteri più complessi, come può
essere il caso di una data o di uno username. Per questo motivo, è possibile specificare una
proprietà pattern, che accetta una
regular expression
come argomento.
Nell'esempio 3.14
,
il nostro campo viene controllato con un pattern complesso, che richiede almeno 6 caratteri
e non più di 9.
Esempio 3.14
<input type="text" required="required"
placeholder="Username con minimo 6 e massimo 9 carat-
teri"
pattern="\w{6,9}" />
Se applichiamo lo stesso CSS introdotto nel caso precedente, l'effetto sarà quello di visua-
lizzare in maniera diversa il controllo quando la condizione non è rispettata.
