HTML5-logo

Nowe podejście do walidacji formularzy w HTML5

Specyfikacja HTML 5 jeszcze się klaruje, ale niektóre przeglądarki już zaczynają wspierać ten nowy standard. Postanowiłem sprawdzić, co nowego przynosi HyperText Markup Language 5 pod względem walidacji danych w formularzach (pola input) oraz jak owe nowinki są aktualnie obsługiwane przez wybrane popularne przeglądarki internetowe (Chrome 5.0.375.99, Safari 5.0 (6533.16), Opera 10.60). Firefox 3.6.8 nie wspiera tej części HTML5 wcale.

Walidacja adresu email

<input type="email" name="email" />

Walidacja URL

<input  type="url" name="url" />

Wymagane pole z przykładowym tekstem

<input type="text" name="nazwisko" placeholder="Kowalski" required />

Atrybut required sprawia, że pole staje się wymagane i przeglądarka nie wyśle formularza, gdy pole będzie puste.

Atrybut placeholder działe jedynie w polach formularza typu text, email, url, search, tel i password.

Niestety, w Operze 10.60 na MacOSX placeholder jest niewidoczny. W Chrome i Safari przykładowy tekst (placeholder) wyświetla się prawidłowo i znika po wejściu w pole input.

Walidacja numeru telefonu zgodnie z szablonem podanym w przykładowym tekście

<input type="tel" name="telefon" placeholder="601-102-203" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" />

W pattern podajemy wymagane wyrażenie regularne.

Walidacja liczby z zadanego przedziału [1, 100]

<input type="number" name="nr_mieszkania" placeholder="Podaj numer mieszkania" min="1" max="100" />

Atrybut min określa wartość minimalną a max maksymalną dla pola.

Wybór wartości z listy

<input type="text" name="plec" placeholder="Wybierz płeć" list="plcie" />
<datalist id="plcie">
	<option value="K" label="kobieta"></option>
	<option value="M" label="mężczyzna"></option>
</datalist>

Listy natomiast działają poprawnie jedynie w Operze. W specyfikacji można przeczytać o wyborze kilku pozycji z listy dzięki atrybutowi multiple, ale mnie ta opcja nie zadziałała w żadnej z przeglądarek.

Walidacja daty z zadanymi ramami czasowymi

<input type="date" name="urodziny" min="1890-01-01" max="1999-12-31" />

W tym przykładzie w atrybutach min i max podajemy datę w formacie RRRR-MM-DD (rok-miesiąc-dzień). W Operze, to wybraniu tego pola, pokazuje się w pełni funkcjonalny kalendarz. W Safari obok pola widoczne są jedynie strzałki góra/dół, umożliwiające krokową zmianę daty w zadanym przedziale. Chrome nie daje żadnych ułatwień.
Dla przypomnienia, placeholder nie jest zaimplementowany w polach związanych z datą i czasem, co jest zrozumiałe, gdyż powinien je obsłużyć interfejs przeglądarki.

Pobieranie samej godziny z zadanym warunkiem

<input type="time" name="czas" min="08:00" />

Tutaj nadaliśmy tylko dolne ograniczenie dla ram czasowych, poprzez atrybut min. Czas podajemy w formacie hh:mm (godzina:minuty).
Opera i Safari wyświetlają pomocne przy zmianie wartości strzałki góra/dół.

Pobieranie miesiąca

<input type="month" name="miesiac" />

Miesiąc podajemy w formacie RRRR-MM (rok-miesiąc).
Opera wyświetla pomoc w postaci kalendarza, a Safari jako strzałki góra/dół.

Pobieranie tygodnia

<input type="week" name="tydzien" />

Tydzień podajemy w formacie RRRR-WMM (rok-Wtydzień).
Ponownie, Opera wyświetla pomoc w postaci kalendarza, a Safari jako strzałki góra/dół. W Chrome ułatwień brak.

Walidacja daty i czasu

Tutaj mamy dwie możliwości – pobieramy czas lokalny, lub czas uniwersalny (UTC).

Czas lokalny
<input type="datetime_local" name="data_czas_lokalne" />

Datę i czas lokalne podajemy w formacie RRRR-MM-DDThh:mm (rok-miesiąc-dzieńTgodzina:minuty). W sumie wartość tego pola składa się z 16 znaków.

Czas UTC
<input type="datetime" name="data_czas_utc" />

Datę i czas uniwersalne podajemy w formacie RRRR-MM-DDThh:mmZ (rok-miesiąc-dzieńTgodzina:minutyZ). Wartość tego pola składa się z 17 znaków.
Opera wyświetla pomoc w postaci kalendarza, a Safari jako strzałki góra/dół.

Wybór wartości za pomocą „suwaka”

<input type="range" name="nasycenie" min="0" max="100" step="5" value="80" />

Prosty suwak, którego przesuwanie umożliwia zmianę numerycznej wartości pola. Ponieważ slider ma określone wartości minimalne (atrybut min) oraz maksymalne (max), to pole zawsze przyjmuje pewną wartość z tego przedziału.
Możemy także określić skok suwaka za pomocą atrybutu step.

Pole „szukaj”

<input type="search" name="szukaj" placeholder="Wpisz szukaną frazę" />

Ten typ pola nie wiele różni się od pola tekstowego. Jedyna różnica polega na sposobie wizualnej prezentacji pola w różnych przeglądarkach, a aktualnie widać ją jedynie w Safari.

Dodatek

Pod poniższym linkiem znajdziecie przykładowy prosty formularz, zawierający wszystkie przykłady opisane powyżej. Dzięki niemu możecie szybko sprawdzić jak Wasza przeglądarka wspiera HTML5 i jak działają (i wyglądają) nowe funkcje walidacji.

Przykładowy formularz w HTML5

Warto przeczytać:

W3C HTML5 spec
How well does your browser support HTML5?

Autor

Kamil Skrzypiński

Fullstack developer, programista aplikacji internetowych i mobilnych. Zna się m.in. na Ruby on Rails, JavaScript, Objective-C, PHP, HTML5 i CSS3. Instalacja i konfiguracja serwera z mniej i bardziej popularnymi usługami, to też dla niego nie problem. Niegdyś zapalony radiowiec - głównie od strony techniczno-informatycznej.

3 przemyślenia nt. „Nowe podejście do walidacji formularzy w HTML5”

  1. Bardzo dobry wpis :) W ogóle HTML 5 ma wiele bardzo ciekawych nowości, zdecydowanie dystansując (martwego) „konkurenta” – XHTML2.

    Póki co jednak niestety nie można liczyć na to, że każdy internauta ma odpowiednią przeglądarkę. Warto może zatem zastować to, o czym piszesz a jeśli nie ma w przeglądarce odpowiedniego wsparcia dla HTML5 – małego frameworka walidacyjnego:
    http://www.yarpo.pl/2011/06/06/wykorzystanie-yformvalidator-walidacja-formularzy/

  2. Ciekawy artykuł, ale co jeśli w polu z numerem telefonu, chciałbym mieć walidacje dla dwóch rodzajów telefonu (stacjonarny lub komórkowy)?
    Jak to poprawnie zapisać?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *