HTML5 i walidowanie formularzy nie było prostsze, czyli o atrybucie pattern | DailyWeb.pl

HTML5 i walidowanie formularzy nie było prostsze, czyli o atrybucie pattern

Opublikowano 4 lata temu - 7


Kolejna odsłona cyklu, który w zasadzie nie ma swojej nazwy, a za pośrednictwem którego pragnę zaprezentować Wam najciekawsze, mało znane tagi albo atrybuty z HTML5 czy dyrektywy z CSS3. Pisałem ostatnio o nieprzyjmującym żadnych wartości, atrybucie download, dzięki któremu możesz zmusić przeglądarkę do pobrania pliku. Przeglądając kurs HTML5, który otrzymałem do testów od Strefy Kursów, znalazłem znacznie więcej smaczków. Dzisiaj o atrybucie formularzy pattern, który z założenia jest doskonałym rozwiązaniem. Czy jednak walidowanie formularzy po stronie HTML to dobry pomysł? Niestety jak się okazuje, ma on swoje wady.

Formularze, rzecz nieodłączna każdej strony internetowej. Nie wiem jak dla Was, ale zawsze kiedy musiałem utworzyć jakikolwiek formularz na własne potrzeby lub dla klienta, zawsze była katorga przy ich walidowaniu. A niech wymaganych pól było więcej niż jedno, to zawsze katorga z zapisaniem wszystkich IF'ów, sprawdzających po stronie PHP czy użytkownik uzupełnił wszystkie wymagane inputy. Oczywiście, jakby się uprzeć, można było wykorzystać gotowe frameworki albo JS, ale w przypadku pierwszych to armata na wróbla z reguły, a do drugiej opcji nigdy nie byłem specjalnie przekonany. Tak czy siak walidowanie pól formularza zawsze było dla mnie uciążliwe.

Jest jednak na to doskonałe lekarstwo, dostarczone przez specyfikacje HTML5, to atrybut o nazwie pattern. Odpowiedzialny jest on za walidowanie pól formularzy, zależnie od wymaganej wartości. Podając w zawartości wyrażenie regularne, możemy zmusić użytkownika do podania wartości nas interesującej, jeśli niepokorny użytkownik jej nie poda, przeglądarka wyśle komunikat o błędnej zawartości. Jak wygląda to w praktyce?

<form action="#">
  Kod pocztowy: <input type="text" name="country_code" pattern="[0-9]{2}\-[0-9]{3}" title="Format xx-xxx">
  <input type="submit">
</form>

 
Poniżej działający przykład z możliwością podglądu (klikając na zakładkę HTML):
 

See the Pen Atrybut Pattern by seb (@lubik) on CodePen.


 
Jak sami widzicie sprawa jest dość prosta. Podając atrybut pattern w polu formularza, możemy wymusić podanie pożądanego formatu. Pojawia się jednak pytanie, co jeśli nie znam sposobu zapisu wyrażeń regularnych? Są dwa rozwiązania: albo się ich nauczysz i będziesz miał już na zawsze święty spokój, a dwa - możesz skorzystać z gotowców. Na stronie html5pattern.com znajdziesz gotowe wyrażenia regularne do zastosowania. Wśród nich różne formaty, począwszy od haseł, formatów dat czy numerów telefonów - kończąc na kodach pocztowych obowiązujących w różnych krajach. Co ważne, każdy przypadek opatrzony jest przykładem, świetna ściąga.

Wszystko wygodne, proste i przyjemne, więc pozostaje pytanie czy jest jakiś haczyk? Niestety tak. Przede wszystkim parametr pattern nie jest wspierany przez wszystkie przeglądarki. Oczywiście mając najnowszego Firefoxa, Chrome'a czy Operę - nie będzie problemów. Pojawią się one jeśli użytkownik naszych formularzy będzie używał IE z numerkiem 9 lub mniejszym. Większym problemem jest jednak Safari, które w żadnej wersji nie wspiera tego atrybutu. Sami widzicie, nie może być zbyt prosto. Oczywiście uparty wykorzysta omawiany atrybut, ale będzie się musiał zabezpieczyć przed Safari czy IE 9 lub starszym. Na stos z przeglądarką Apple!