[CSS] Jak walidować pola formularzy za pomocą CSS?

Postanowiłem pociągnąć temat związany z formularzami. Tym razem skupię się na sposobach walidowania pól formularzy za pomocą możliwości dostarczonych przez CSS.

Temat walidacji formularzy został poruszony przez jednego z czytelników (pozdrawiam Ciebie, Comandeer) bloga w komentarzach do poprzedniego wpisu o etykietach formularzy i niejako zdradził tematykę kolejnego wpisu na blogu.

CSS3 - pseudoklasy pól formularzy

Aby móc dokonać sprawdzenia poprawności pól formularzy za pomocą CSS musimy skorzystać z jednej z poniższych pseudoklas CSS:

• :valid,
• :invalid,
• :required,
• :optional,
• :in-range,
• :out-of-range.

Na chwilę obecną, lista pseudoklas liczy 8 pozycji, ale może się zdarzyć tak, że w przyszłości zostanie rozszerzona o nowe. Czas pokaże.

CSS3 - pola wymagane i opcjonalne

Za pomocą kodu CSS możemy sprawdzić czy dane pole tekstowe jest wymagane czy też opcjonalne. Dla każdego z tych dwóch przypadków możemy zastosować inne style. Kod HTML odpowiedzialny za efekt wygląda następująco:

1
2
3
4

<input type="text" placeholder="Pole wymagane" required id="field-required">
<label for="field-required">Imię</label>
<input type="text" placeholder="Pole opcjonalne" optional id="field-optional">
<label for="field-optional">Wiek</label>

Powyższy kod stylujemy za pomocą nastepującego kodu CSS:

1
2
3
4
5
6
7
8
9
10
11

input:required {
  border: 1px solid #000;
}
input:optional {
  border: 1px solid #ddd;
}
input:required + label:after {
  content: '*';
  display: inline-block;
  margin-left: .25rem;
}

Pole wymagane będzie zaznaczone czarną ramką i dodatkowo, tuż za etykietą pola, pojawi się znacznik * oznaczający domyślnie pole wymagane. Końcowy efekt wygląda następująco:

CSS3 - pola poprawnie i niepoprawnie wypełnione

W kolejnym przykładzie sprawdzimy czy nasze pole jest poprawnie wypełnione czy też nie. Potrzebujemy do tego kod HTML, którym określimy pole tekstowe:

1
2

<input type="email" placeholder="Wpisz adres email" id="field-email">
<label for="field-email">Adres email</label>

Dodajemy kod CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

input.filled:valid {
  background: green;
}
input:invalid {
  background: red;
}
input.filled:valid + label:after {
  content: '✓';
  display: inline-block;
  margin-left: .25rem;
}
input:invalid + label:after {
  content: 'x';
  display: inline-block;
  margin-left: .25rem;
}

Niestety, za pomocą CSS nie jesteśmy w stanie jednocześnie sprawdzić czy pole jest poprawnie wypełnione i nie jest puste. CSS zakłada, że pole puste jest poprawnie wypełnione, jeśli nie dołożyliśmy jakiegoś wzorca do sprawdzenia lub atrybutu HTML - required. W tym celu, możemy się posłużyć kodem JS, który ułatwi nam nieco zadanie i to on będzie odpowiedzialny za dodawanie klasy CSS - .filled do wypełnionych elementów formularza:

1
2
3
4
5
6
7
8
9
10
11

(function () {
  var input = document.querySelector('input');
 
  input.addEventListener('keyup', function (event) {
    if (event.target.value !== '') {
      event.target.classList.add('filled');
    } else {
      event.target.classList.remove('filled');
    }
  });
})();

Jako że, sprawdzamy tylko jedno pole tekstowe, czy jest wypełnione bądź nie. Na tej podstawie decydujemy czy pole ma mieć przyznaną dodatkową klasę CSS.

CSS3 - sprawdzanie zakresu wartości

Kolejny przykład będzie dotyczył sprawdzania poprawności liczby względem zakresu liczb w jakim ma się ona mieścić. Przykładowy kod HTML wygląda następująco:

<input type="number" max="10" min="1">

Do powyższego kodu HTML stosujemy poniższy kod CSS:

1
2
3
4
5
6

input:out-of-range {
  border: 2px solid #b30;
}
input:in-range {
  border: 2px solid green;
}

Tym samym, za każdym razem gdy w polu znajdzie się liczba spoza zakresu, ramka pola będzie koloru czerwonego.

Podsumowanie

Mam nadzieję, że dzięki powyższym przykładom będziesz mógł/mogła utworzyć formularze, które będą w stanie podpowiedzieć użytkownikowi twojej strony, że zostały wprowadzone błędne dane do formularza. Należy jednak pamiętać, że walidacja pól za pomocą CSS pełni funkcję tylko i wyłącznie wizualną. Nie zabezpieczy to przed przesłaniem błędnych danych na serwer. Zalecaną praktyką jest sprawdzanie poprawności danych już po stronie serwera. Dzięki temu unikniemy różnych problemów i niebezpiecznych sytuacji na swojej stronie.