Przez bardzo długi czas w celu walidacji treści wpisywanej do różnorakich formularzy stosować trzeba było skrypty JS lub PHP. Teraz jednak sytuacja się zmienia. HTML5 daje nam pewne możliwości w zakresie kontroli tego co i jak uzupełniają nasi użytkownicy. Oznaczanie wymaganych pól i nawet bardziej zaawansowane właściwości mogą być wprowadzane już z poziomu kodu HTML. Dlatego warto poszerzyć swoją wiedzę na ten temat. Jeśli nie słyszałeś nigdy o walidacji formularzy w HTML5 to zapraszamy do lektury…
Podstawową rzeczą jaką możemy zrobić żeby zacząć walidować treść wpisywaną przez użytkowników w okienka formularza jest wymuszenie obowiązkowości określonego pola. Robimy to w prosty sposób:
1 | <input type="text" name="formluarz1" required> |
Dzięki dodaniu atrybutu required informujemy przeglądarkę, że ten input jest obowiązkowy. Jeśli użytkownik go nie uzupełni zostanie poinformowany o brakach w formularzu. Takie powiadomienie przybierze formę domyślnie zdefiniowaną w przeglądarce, ale możemy tutaj zaingerować i stworzyć naszą własną wizję wyglądu owego powiadomienia. O tym później.
Warto wspomnieć, że każdy ze znanych HTML5 rodzajów inputów można uznać za wymagany ( requiered ). Dlatego takie atrybuty jak date , url , email etc. również mogą być przez nas oznaczone jako mandatoryjne. W zależności od tego jak „mądra” jest nasza przeglądarka możliwe będzie nawet walidowanie poprawności wpisanych adresów e-mail. Oczywiście odbywa się to w ograniczony sposób, ale już na poziomie kodu HTML będziemy mogli stwierdzić czy ktoś wpisał w formularzu adres będący adresem e-mail (np. coś@coś.pl) a nie np. youtube.com.
HTML5 daje nam nie tylko możliwość ustalenia co jest obowiązkowe a co nie. Z naszą walidacją możemy iść znacznie dalej. Możemy stworzyć wzór według, którego walidowane będzie dane pole.
1 | <input type="text" required pattern="[A-Za-z]{3}"> |
Większość zastanawia się pewnie czym jest ten dziwny ciąg znaków po atrybucie pattern . To już trochę inna bajka i żeby zrozumieć jak to działa i z czym można to zjeść zachęcam do lektury tego o to artykułu.
Kolejnymi atrybutami, które możemy dodać do naszych pól formularza są min , max , maxlength i step.
Obecnie istniejące przeglądarki są na tyle sprytne by wykorzystać treść atrybutu title dlatego pola formularza jako treści wiadomości ostrzegającej lub informującej użytkownika. Oczywiście to jak dane ostrzeżenie wygląda zależy już od konkretnej przeglądarki.
1 | <input type="date" required title="Uzupełnij datę!"> |
Jeśli w tagu input ustalimy atrybut pattern przeglądarka wyświetli treść atrybutu title jako podpowiedź wymaganego formatu informacji. Nie jestem jednak pewnym czy działa to w ten sposób we wszystkich przeglądarkach.
Oczywiście możliwe jest też stylowanie naszych walidowanych pól formularzy. Służą do tego pseudoklas :valid i :invalid . Oczywiście można też polegać na domyślnym wyglądzie aplikowanym przez przeglądarkę użytkownika, ale każda osoba dbająca o detale będzie pewnie zadowolone, że może w jakiś sposób kontrolować wygląd poszczególnych pól formularza również z uwzględnieniem ich walidacji. Do dalszej lektury zachęcam pod tym adresem.
Podsumowując można powiedzieć, że HTML5 i CSS3 poszerzają znacząco nasze możliwości w dziedzinie tworzenia formularzy na stronach www. Teraz podstawowa walidacja może odbywać się na poziomie kodu HTML bez konieczności sięgania po PHP i JS. Oczywiście jeśli chcemy stworzyć bardziej skomplikowane systemy walidacji to będziemy musieli sięgnąć po wcześniej wspomnianą klasykę czyli skrypty php i js, ale zwykle kiedy konstruujemy formularz kontaktowy zależy nam przede wszystkim na konwersji odwiedzającego w potencjalnego użytkownika lub kupującego a nie na tym by „prześwietlać” go na wzór służb specjalnych. Zwykle też informacje, na których nam zależy można uzyskać chociażby by przez przypomnienie odwiedzającemu, że dane pole jest dla nas ważne i musi je uzupełnić obowiązkowo. A po co to wszystko? Wygoda, prostota, „święty spokój”, wymogi klienta… ale jednak przede wszystkim walidacja HTML odbywa się po stronie przeglądarki i znacząco usprawnia interakcję użytkownika ze stroną, ponieważ efekty walidacji widoczne są od razu na ekranie.
Ciekawe źródła wiedzy:
- http://24ways.org/2009/have-a-field-day-with-html5-forms
- http://www.the-art-of-web.com/html/html5-form-validation/#references
- http://www.alistapart.com/articles/forward-thinking-form-validation/
- http://www.w3.org/TR/selectors4/
- http://html5doctor.com/css3-pseudo-classes-and-html5-forms/
- http://stephenwalther.com/archive/2012/03/13/html5-form-validation.aspx
- http://ericleads.com/h5validate/ (lekarstwo dla starszych przeglądarek)
Zdjęcie pochodzi z www.freedigitalphotos.net
Dane przychodzące do systemu ZAWSZE muszą być prześwietlane. Podstawowa sprawa – bezpieczeństwo.
Oczywiście, jednak walidacja już z poziomu klienta jest wygodniejsza dla użytkownika. Nie mniej jednak powinniśmy też koniecznie walidować dane w backendzie.
Ale w artykule się pojawiło: „Teraz podstawowa walidacja może odbywać się na poziomie kodu HTML bez konieczności sięgania po PHP (…)”.
Raczej autorowi nie chodziło o możliwość użycia ASP czy Javy ;)
Hmm, faktycznie brzmi to niefortunnie. Dziękuję, poprawię, żeby nie gubić kontekstu.