Ta strona używa cookies
sprawdź politykę prywatności

Rozumiem

Zaawansowana walidacja formularzy bez użycia JavaScript.

13/5/2019
Bartek Cis

Formularze są jednym z podstawowych elementów każdej aplikacji. Naucz się tworzyć je w bardziej wydajny sposób za pomocą HTML i CSS.

Czego się dzisiaj dowiesz?

Pokażę jak stworzyć walidację formularza tylko przy użyciu HTML i CSS. Nie napiszę przy tym ani jednej linijki kodu JavaScript. Myślisz, że nie da się stworzyć w ten sposób fajnej interakcji z użytkownikiem? No popatrz na to:

See the Pen
Form Validation HTML & CSS
by Bart (@bedekodzic)
on CodePen.


Wygląda całkiem spoko, nie uważasz?

Jak to się najczęściej robi?

Każdy może mieć inne podejście ale z tego co najczęściej obserwuje to do walidacji używa się JavaScript. Po prostu albo wykonuje się odpowiednie akcje przy interakcji z elementem formularza lub przy próbie wysłania całości. Np. taki pseudo kod:


Nowoczesne frameworki mają swoje własne sposoby na walidację które całą sprawę nieco ułatwiają jednak jest tam ciągle sporo JavaScript.

Czego Ci życzę?

Chciałbym abyś był/a właścicielem aplikacji która posiada miliony użytkowników którzy wypełniają tam masę formularzy. Wtedy każda optymalizacja wydajności to ogromna oszczędność zasobów. Oszczędność RAMu 🙂

Dobry JavaScript developer wie, że im mniej napisze JS’a i osiągnie swój cel tym lepiej 🙂 Ma więcej czasu na czytanie blogów a aplikacja działa wydajnie! Jeśli chodzi o walidację formularzy to można użyć kilka potężnych narzędzi jakie oferują HTML i CSS.

Odpowiednia struktura HTML

Aby obyć się bez JS’a przy walidacji trzeba odpowiednio zaplanować jak ma wyglądać przykładowe pole w formularzu:

A więc jak możesz do tego podejść?

Wrapper

Wszystko wrzuciłem w wrappera class=”form__field”  który będzie kontrolował podrzędne elementy za pomocą position: relative;

Pole Formularza

input czyli zasadnicze miejsce na dane. Celowo znajduje się na początku jako pierwsze dziecko ale o tym za moment jak będę omawiał CSS.

Opis pola

label  jest na position:absolute a to dlatego, że zastosuje fajną animację i będzie “pseudo” placeholderem który przy interakcji przesuwa się do góry.

Status błędu

class=”form__field__error” a w środku jakaś informacja która się pokazuje tylko gdy zawartość pola jest nieodpowiednia.

Ikona stanu

Ja akurat użyłem oddzielnego diva na postition:absolute  class=”form__field__state-icon” ale możesz to załatwić np. pseudo-elementem.

Taka jest przykładowa struktura mojego formularza. Nie jest to jedyna słuszna/prawidłowa wersja. Sam/a dopasuj to do swoich potrzeb 🙂

Natywna walidacja w HTML

Kolejnym krokiem jest użycie tego co HTML nam oferuje w kwestii formularzy. Należy się przyjrzeć budowie pola input i atrybutów tam zawartych:


Type

To bardzo ważny atrybut bo na jego podstawie pole będzie akceptowało odpowiednie wartości i które będą sprawdzane przez HTML przy wysyłaniu.

Name

Używany do identyfikacji pola. Bardzo przydatny.

Placeholder

Domyślny tekst wewnątrz pola. Ja używam wartości “ “ bo stosuje pewien hack w CSS aby odpowiednio obsłużyć animowany placeholder.

Required

Formularz  nie zostanie wysłany dopóki wszystkie wymagane pola nie będą posiadały odpowiedniego formatu.

Pattern

To jest naprawdę niesamowita właściwość 🙂 Wewnątrz można użyć RegExp i zdefiniować zaawansowaną walidację zawartości… pattern=”[A-Za-z]{2,99}” Prawda, że piękne?

Oczywiście istnieje jeszcze sporo innych atrybutów których nie użyłem w tym przykładzie. Sprawdź MDN aby poczytać więcej na ten temat.

Sednem sprawy jest świadome wykorzystanie tego co oferuje HTML. Naprawdę wiele operacji przy użyciu JavaScript i manipulacji formularza może być karkołomnych i kompletnie niepotrzebnych… HTML może załatwić to za Ciebie. Na koniec tej sekcji kompletny kod HTML formularza:


Stylowanie formularza

O ile użycie właściwości input’a może wydawać się oczywiste to odpowiednie ostylowanie już nie musi takie być. Użyję selektorów pomocniczych (tzw. kombinatory 🙂 ) + i ~ aby skorzystać ze struktury pola którą stworzyłem.


Kombinatory

W przykładzie użyłem takich:

+

Czyli bezpośredni “brat” czyli sibling. W ten sposób wybierasz element który jest bezpośrednim kolejnym równorzędnym sąsiadem wybranego bloku.

~

Generalny równorzędny selektor. Niekoniecznie w bezpośrednim sąsiedztwie.

Pseudo-klasy

Już nawiązywałem do tego tematu w tym artykule. Koncepcja jest taka, że przy interakcji elementy HTML przybierają odpowiednie klasy które można potem ostylować. Super się to uzupełnia z kombinatorami.

Czyli jak użytkownik wejdzie w interakcję z inputem to ostyluj w dany sposób następny element który nazywa się w dany sposób.

Jak zwykle MDN posiada znakomitą dokumentację selektorów CSS. Mam nadzieję, że koncepcja jest już teraz dla Ciebie mniej więcej jasna 🙂

Hack z placeholderem

Wspomniałem wcześniej o tym hacku z animowanym placeholderem. Zamiast oryginalnej właściwości w HTML chcę użyć element label który przy interakcji będzie się zmniejszał i wędrował do góry. Wystarczy nadać styl dla pseudo-klas :focus , :valid , :invalid.

Problem polega na tym, że puste pola posiadają status :invalid więc wszelkie style dla błędów będą użyte już na samym początku zanim użytkownik wejdzie w interakcję z formularzem. Tego nie chcesz…

:placeholder-shown

Aby uniknąć tej sytuacji użyj pseudo-klasy :placeholder-shown . Nadaje ona odpowiedni styl jeśli oryginalny placeholder jest widoczny.

Sęk w tym, że wtedy placeholder HTML będzie się pokrywał z moim labelem. Stworzę więc pusty placeholder który tam będzie ale nie będzie go widać placeholder=” “ . Jeśli odbędzie się interakcja wtedy ten placeholder po prostu zniknie.

Muszę jeszcze nadać odpowiedni styl dla klasy :invalid a potem go zresetować do klasy :placeholder-shown :


W podobny sposób można obejść inne wyzwania 🙂

Kompletny kod CSS

Jeśli chcesz spojrzeć w kompletny kod CSS to wygląda on tak:


Do tego jeszcze repozytorium na Githubie z całym formularzem.

To co z tym JavaScriptem?

Teraz już wiesz, że można w całkiem sprytny sposób załatwić kilka spraw bez linijki JS’a. Nie mówię jednak, że jest on zbędny w formularzach 🙂

Ktoś może stwierdzić, że taka manipulacja UX może być niewystarczająca (wygląda słabo) i chce do tego użyć JS. No OK.

To gdzie JS jest niezbędny ( o ile mi wiadomo ) jest obsługa komunikatów z serwera tzn. sukces czy porażka przy wysyłaniu. Więc JS jest super i go używaj jednak nie nadużywaj. Over Engineering nie jest Twoim przyjacielem 🙂

Podsumowanie

W tym wpisie dowiedziałeś/aś się, że można całkiem zgrabnie zbudować walidację formularza bez użycia JavaScript. Interakcja może być bogata i estetyczna.

Lepiej też orientujesz się w natywnej obsłudze formularzy w HTML i selektory CSS odsłoniły przed Tobą kilka kolejnych tak niezdarnie skrywanych tajemnic 🙂

Podziel się z innymi 🙂

Cześć jestem Bartek.

Na tym blogu wprowadzę Cię w tajniki Front-Endu i programowania webowego.

Warto
Social media & sharing icons powered by UltimatelySocial