Walidacja pól formularza <input pattern>

<input pattern="wzorzec">

Pozwala określić tzw. wyrażenie regularne (ang. regular expression) w postaci specjalnego wzorca definiującego format danych, który musi zostać spełniony podczas wpisywania tekstu w polu formularza przez użytkownika. Jest to pewien rodzaj filtru, który uniemożliwia nieprawidłowe wypełnienie formularza.

Jeśli użytkownik wpisze wartość w niepoprawnym formacie, przeglądarka wyświetli komunikat błędu i zablokuje możliwość wysłania formularza. Komunikat ten będzie jednak dość ogólny - np.: "Podaj wartość w wymaganym formacie". Niestety użytkownik może się nie domyślić, co właściwie oznacza ten "wymagany format". Dlatego zaleca się dodatkowo ustawić atrybut title="...", w którym możemy bardziej szczegółowo opisać, co powinno być wpisane w danym polu. W takiej sytuacji przeglądarka może dopisać wartość tego atrybutu do komunikatu błędu.

Atrybut pattern="..." nie blokuje wysłania formularza, jeśli użytkownik w ogóle nie wypełni pola. Może to być pomocne, kiedy nie jest ono obowiązkowe, ale gdy już zostanie uzupełnione, to musi spełniać określony format danych. Jeśli jednak chcemy wymusić wypełnienie pola, trzeba dodatkowo użyć atrybutu required.

Do walidacji wybranych standardowych typów wartości (color, date, datetime-local, email, month, number, range, time, url, week) warto skorzystać z podstawowej wersji pola formularza. Pozwoli to nie tylko prawidłowo zweryfikować poprawność wprowadzanych danych, ale również w wielu przypadkach udostępni użytkownikowi specjalną wersję kontrolki ułatwiającej wybór wartości. Ponadto urządzenia mobilne (np. smartfony) mogą wtedy przełączyć klawiaturę ekranową we właściwy tryb zawierający odpowiedni zestaw klawiszy.

Przykład <input pattern>

Kod pocztowy musi się rozpoczynać dwiema cyframi, następnie zawierać myślnik i na końcu trzy cyfry (np.: 12-345):

📋 Zaznacz kod ▶ Edytuj na żywo

<input name="kod_pocztowy" pattern="^[0-9]{2}-[0-9]{3}$" title="pięć cyfr w postaci XX-XXX (np. 12-345)">

Zobacz przykład: pattern="..."

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari	Poziom wsparcia min. 2,5 roku
<input pattern>	4 2010-01-25	4 2011-03-22	12 2015-07-29	≤12.1 2012-11-20	5 2010-06-07	100%