Puste pole input: jak je sprawdzić samym CSS-em i HTML-em

Da się sprawdzić, czy pole input jest puste, mając do dyspozycji tylko CSS i HTML?

W tym tutorialu pokażę kilka sposobów na sprawdzenie samym CSS-em i HTML-em, czy pole input jest poprawne. Nie stosuj tego jako jedynego zabezpieczenia, tylko jako uzupełnienie walidacji po stronie PHP, ale to ciekawa alternatywa, jeśli nie chcesz się bawić w JavaScript.

Sprawdzenie, czy pole input jest puste

Zacznijmy od zbudowania formularza. Weźmiemy prosty formularz z jednym polem input, a żeby przy walidacji formularza HTML sprawdzić, czy pole jest puste, dodaję obowiązkowy atrybut required.

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

Na razie nic trudnego, atrybut required jest dość znany. Jest też readonly, który blokuje zmianę wartości domyślnej.

Na tym etapie pojawia się problem: jeśli użytkownik wpisze w polu spację, input jest „wypełniony”. Technicznie to prawda, bo coś w nim wpisano, ale nie chcemy, żeby białe znaki uznawały pole za poprawne.
To za mało, potrzebujemy ostrzejszej kontroli.

Dodatkowe sprawdzenia

HTML pozwala walidować pola input wyrażeniami regularnymi przez atrybut pattern.
Skoro nie chcemy przepuszczać białych znaków, spróbujmy ze wzorcem .*S.*. Wzorzec oznacza: jeden lub więcej znaków, które nie są spacjami.

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

Niepoprawne pola input

Nie chcemy sięgać po :invalid, bo nie zamierzamy startować z polem w stanie niepoprawnym (puste pole i tak już jest niepoprawne).
Jest za to pseudoklasa :placeholder-shown, którą można wykorzystać do sprawdzenia, czy placeholder jest widoczny. Pomysł wygląda tak:

1. Wpisujesz znak w pole
2. Jeśli placeholder znika, znaczy to, że użytkownik coś wpisał
3. Przechodzisz do walidacji (albo do jej odrzucenia)

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

Uwaga: style stanu poprawnego muszą stać po stylach stanu niepoprawnego.

/* 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;
}

Uwaga: Edge nie obsługuje :placeholder-shown, więc na produkcji to prawdopodobnie jeszcze nie jest dobry pomysł. Nie ma też sensownego sposobu na wykrycie tej pseudoklasy.