Walidacja formularzy w HTML5
HTML5, pomimo iż jeszcze nie ukończony, w znacznym stopniu jest już wspierany przez przeglądarki. Jedną z rzeczy która częściowo jest obsługiwana, są nowe typy pól i walidacja formularzy. Bez pomocy JavaScript!
Spis treści
Kilka słów wstępu o HTML5
Jak wiadomo, HTML5 jest jeszcze w wersji roboczej. Nie przeszkadza to jednak producentom przeglądarek w implementowaniu co ciekawszych nowości. Jedną z takich nowości jest duże rozszerzenie możliwości tworzenia formularzy oraz ich walidacji, bez potrzeby uciekania się do użycia JavaScriptu. Zazwyczaj wygodniej jest korzystać z podpowiedzi o niepoprawnie wypełnionym polu, czy lepszej możliwości wybrania daty, jeśli jest to zaimplementowane po stronie przeglądarki, zwłaszcza jeśli nie jest to przeglądarka na komputerze, ale innym urządzeniu (tablet, smartfon).
Specyfikacja HTML5 wprowadza dużo nowości, dlatego warto przyjrzeć im się z bliska.
Na początku zaznaczę, że niestety żadna z tych rzeczy nie działa w Internet Explorer 9 ani wcześniejszych wersjach. Z zapowiedzi wynika, że wiele z nich będzie działać w IE10, ale zobaczymy w jakim stopniu.
W implementacji nowości w formularzach HTML5 zdecydowanie przoduje Opera, nawet Opera Mobile dla urządzeń przenośnych obsługuje większość z tych nowości! Z mobilnych przeglądarek jeszcze Safari dla iOS posiada obsługę, niestety nie jestem w stanie sprawdzić jak dalece posuniętą. Niestety Android odstaje – całkowity brak obsługi.
Podpowiedzi w polu input
Jak to było do tej pory
Dając użytkownikowi do wypełnienia formularz, trzeba dobrze go poinformować w którym polu co powinien wpisać. Można to zrobić stosując rozbudowane opisy w labelach, opisy obok pola input, różnego typu tooltipy CSSowe czy JSowe, albo po prostu napisać w polu input kilka słów.
Na wielu stronach można zobaczyć taki efekt od dawna, ale do tej pory był osiągalny jedynie przy pomocy JavaScriptu: odpowiednie akcje przy ustawionym i straconym focus i po sprawie. Niestety często zdarza się też, że jest to zrobione dość nieudolnie – jakiś dodatkowy input/span/div osadzony absolutnie, ustawiony już na poziomie HTML i odpowiednio ukrywany przy fokusie na polu input. Ale co w przypadku gdy użytkownik ma wyłączony JavaScript (lub po prostu jego przeglądarka go nie obsługuje)? Oczywiście mamy dwa teksty nałożone – podpowiedź i to co wpisaliśmy w polu input. Efekt można zobaczyć np. na dość popularnej stronie poświęconej filmom ;)
Jakie możliwości mamy teraz – placeholder
Teraz nie trzeba kombinować z dodatkowymi tagami, ukrywaniem i pokazywaniem przez JavaScript i zastanawianiem się „co będzie jak użytkownik wyłączy obsługę JS?”. Teraz mamy jeden atrybut dla tagów input i textarea, mianowicie: placeholder. Wystarczy wpis <input type="text" id="nazwisko" name="nazwisko" placeholder="Podaj nazwisko" /> i nie trzeba dodatkowych kombinacji. Prawda że proste?
Pomimo faktu, że większość przeglądarek obsługuje placeholder, niestety jest problem z jego ostylowaniem. Firefox, Chrome i Safari umożliwiają to przez własne selektory (odpowiednio :-moz-placeholder oraz ::-webkit-input-placeholder). Na szczęście domyślnie tekst wyświetla się jasno-szarym kolorem, więc wygląda całkiem OK.
Działa w przeglądarkach Firefox, Opera, Chrome, Safari.
Walidacja pól formularza po stronie użytkownika
Walidacja po stronie użytkownika również istnieje od dawna. Jedyną możliwość jaką mieliśmy przed HTML5, było sprawdzanie wartości pól przy pomocy JavaScript przed wysłaniem formularza. Tu najczęściej nie było problemów w przypadku braku obsługi JS po stronie przeglądarki, ale pojawiały się „ciekawe” pomysły, np. ustawianie dodatkowego parametru przed wysłaniem jeśli walidacja JS przebiegła pomyślnie, oraz zwracanie (po wysłaniu formularza) błędu, jeśli ten atrybut nie był ustawiany. W ten sposób, nawet jeśli ktoś wypełnił wszystkie pola poprawnie, ale nie miał JavaScriptu – dostawał błąd. Niektórzy na prawdę lubią utrudniać ludziom życie :)
Teraz, w HTML5 wystarczy ustawienie odpowiedniego atrybutu z wyrażeniem regularnym. Nie trzeba się przejmować niczym więcej, jedynie faktem, żeby wyrażenie było poprawne (z tym nieraz mogą być trudności, dlatego warto dobrze się zapoznać ze sposobem ich tworzenia). Jeśli np. chcesz ograniczyć pole jedynie do liter i spacji, wystarczy wpis <input type="text" id="literki" name="literki" placeholder="Tylko litery" pattern="^[a-zA-Z ]+$" />.
Działa w przeglądarkach Firefox, Opera, Chrome, ale nie działa w Safari 5.1.2.
Uwaga dotycząca walidacji
Pamiętaj, że niezależnie od tego jaką walidację zrobiłeś po stronie użytkownika (czy to przez pattern czy przy pomocy JS), musisz robić walidację przy odbieraniu danych z formularza! Walidacja po stronie użytkownika nigdy nie zapewni tego, że skrypt przyjmujący wypełniony formularz, dostanie poprawne dane – requesty HTTP bardzo łatwo można spreparować.
Wsparcie nowych pól w przeglądarkach
Po pierwsze, wszystkie nowe typy pól działają we wszystkich przeglądarkach, jednak nie w każdej z nich będzie ułatwione podanie wartości pola. W przypadku gdy przeglądarka nie obsługuje danego typu, wyświetli dane pole input jako zwykłe pole tekstowe. Tym bardziej ważnym jest, aby sprawdzać poprawność danych po ich odebraniu – nigdy nie można wierzyć jedynie walidacji po stronie użytkownika.
Aby przetestować działanie nowości w HTML5 w swojej przeglądarce, możesz skorzystać z gotowego formularza.