Verificare se un input è vuoto solo con HTML e CSS

È possibile sapere se un input è vuoto usando solo CSS e HTML?

In questo tutorial ti do qualche accorgimento per verificare se un input è valido o no usando solo CSS e HTML. Non è una tecnica da usare da sola, ma piuttosto in appoggio a una validazione lato PHP, resta però un’alternativa interessante se non vuoi impelagarti troppo con JavaScript.

Verificare se l’input è vuoto

Per prima cosa costruiamo un form. Usiamo un form semplice con un solo input, per controllare che non sia vuoto durante la validazione HTML del form aggiungo l’attributo required.

<form>
  <label> Input </label>
  <input type="text" name="input" id="input" required />
</form>

Fin qui niente di complicato: l’attributo required è piuttosto noto. Esiste anche readonly, che impedisce di modificare un valore predefinito.

A questo punto c’è un problema: se l’utente inserisce uno spazio nel campo, l’input risulta «pieno». Tecnicamente è corretto, l’input è pieno perché l’utente ci ha digitato qualcosa, ma non vogliamo che degli spazi rendano valido il campo.
Non basta: ci serve un controllo più rigoroso.

Controlli complementari

L’HTML ti dà la possibilità di validare gli input con espressioni regolari, grazie all’attributo pattern.
Dato che non vogliamo accettare gli spazi, proviamo con questo schema: .*S.*. Significa: uno o più caratteri che non siano spazi.

<form>
  <label> Input </label>
  <input type="text" name="input" id="input" required pattern=".*S.*"/>
</form>

Gli input non validi

Non vogliamo usare :invalid, perché non vogliamo che l’input parta già in stato non valido (quando l’input è vuoto è già non valido).
Esiste la pseudo-classe :placeholder-shown, che serve a sapere se il placeholder è visibile. L’idea è questa:

1. Aggiungi un carattere nel campo
2. Se il placeholder sparisce, significa che l’utente ha digitato qualcosa
3. Procedi con la validazione (o con l’invalidazione)

/* Afficher les bordures rouges lorsqu'elles sont remplies, mais non valides */
input:not(:placeholder-shown) {
  border-color: red;
}

Attenzione: assicurati che gli stili validi vengano dopo gli stili non validi.

/* Afficher les bordures rouges lorsqu'elles sont remplies, mais non valides */
input:not(:placeholder-shown) {
  border-color: hsl(0, 76%, 50%);;
}
/* Afficher les bordures vertes lorsqu'elles sont valides */
input:valid {
  border-color: green;
}

Attenzione: Edge non supporta :placeholder-shown, quindi probabilmente non è ancora una buona idea usarlo in produzione. E non esiste un buon modo per rilevare questa pseudo-classe.