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?

[html]
<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>
[/html]

 
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!


Posłuchaj nas!