search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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.

  • >pozdrawiam Ciebie, Comandeer
    Również pozdrawiam 😀

    To co – następnym razem XForms? 😉

    >Należy jednak pamiętać, że walidacja pól za pomocą CSS pełni funkcję tylko i wyłącznie wizualną.
    No właśnie – dlatego ciut mi tutaj zgrzyta to słówko „walidacja”… równocześnie nie umiem znaleźć innego, sensownego. Zresztą, powiedzmy sobie szczerze: cały mechanizm walidacji w HTML5 (i/lub JS) jest określany w specyfikacji jako jedynie poprawiający UX – http://www.w3.org/TR/html5/forms.html#security-forms – w tym kontekście walidacja w CSS nabiera większego sensu.

    >Zalecaną praktyką jest sprawdzanie poprawności danych już po stronie serwera.
    IMO eufemizm. *NIEZBĘDNĄ* praktyką!

    BTW :optional chyba nie wymaga atrybutu [optional], ale braku [required]? Bo prawdę mówiąc [optional] po raz 1. widzę.

  • kapke

    Hej! Mi też słówko „walidacja” nie pasuje, ale „stylowanie walidowanego formularza” to już chyba dobre określenie?:)

  • W sumie nie załatwia to do końca walidacji, ale razem z rozwiązaniami z HTML5, jest już całkiem fajnie. Cieszy fakt że coraz więcej rozwiązań mamy ‚out of the box’ 🙂