Walidacja formularzy to kluczowy element twórców stron internetowych, pozwalający upewnić się, że dane wprowadzane przez użytkowników są poprawne. HTML5 dostarcza szeroki wachlarz narzędzi do walidacji, takich jak atrybuty pola input oraz możliwość wykorzystania wyrażeń regularnych (ang. regular expressions, regex). W tym artykule omówimy podstawy korzystania z tych narzędzi, wyjaśnimy ich działanie i zaprezentujemy praktyczne przykłady.

Atrybuty input w HTML5

HTML5 wprowadziło nowe typy i atrybuty dla elementów formularzy, które upraszczają walidację. Oto najważniejsze z nich:

1. required

Atrybut required oznacza, że pole jest obowiązkowe.

<input type="text" name="username" required>

Jeśli użytkownik nie wypełni tego pola, przeglądarka wyświetli odpowiedni komunikat o błędzie.

2. minlength i maxlength

Określają minimalną i maksymalną liczbę znaków w polu tekstowym.

<input type="text" name="password" minlength="8" maxlength="20" required>

Pole password musi zawierać od 8 do 20 znaków.

3. pattern

Atrybut pattern pozwala określić regułę walidacji za pomocą wyrażenia regularnego.

<input type="text" name="postalCode" pattern="\d{2}-\d{3}" title="Wprowadź kod pocztowy w formacie XX-XXX." required>

Wyrażenie regularne \d{2}-\d{3} wymaga wpisania kodu pocztowego w polskim formacie (np. 50-123).

4. type

HTML5 wprowadza nowe typy pola input, które automatycznie walidują dane:

• email – weryfikuje, czy wprowadzone dane są adresem e-mail.
• url – sprawdza poprawność adresu URL.
• number – wymaga wpisania liczby.
• tel – waliduje numer telefonu.

Przykład:

<input type="email" name="userEmail" required>

Jeśli wpisana wartość nie przypomina adresu e-mail (np. brak znaku @), przeglądarka zgłosi błąd.

Podstawy wyrażeń regularnych

Wyrażenia regularne to potężne narzędzie do precyzyjnej walidacji danych. Poniżej omówimy podstawowe elementy ich składni:

1. Znaki specjalne
   • \d – dowolna cyfra (0-9).
   • \w – dowolny znak alfanumeryczny (litera, cyfra lub podkreślenie).
   • . – dowolny pojedynczy znak.
2. Modyfikatory ilości
   • {n} – dokładnie n wystąpień.
   • {n,m} – od n do m wystąpień.
   • * – zero lub więcej wystąpień.
   • + – jedno lub więcej wystąpień.
3. Kotwice
   • ^ – początek łańcucha.
   • $ – koniec łańcucha.
4. Znaki grupujące i alternatywa
   • () – grupowanie wyrażeń.
   • | – alternatywa (lub).

Przykłady wyrażeń regularnych

1. Kod pocztowy (XX-XXX)

<input type="text" pattern="\d{2}-\d{3}" title="Kod pocztowy w formacie XX-XXX" required>

Wyrażenie \d{2}-\d{3} akceptuje dwa znaki cyfr, myślnik i trzy cyfry.

2. PESEL (11 cyfr)

<input type="text" pattern="\d{11}" title="PESEL musi zawierać 11 cyfr." required>

Wyrażenie \d{11} wymaga dokładnie 11 cyfr.

3. Hasło (min. 8 znaków, w tym jedna wielka litera, mała litera i cyfra)

<input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Hasło musi mieć co najmniej 8 znaków, w tym jedną wielką literę, jedną małą literę i cyfrę." required>

Praktyczne przykłady walidacji

Formularz z walidacją

Poniższy formularz łączy omówione elementy:

<form>
  <label for="email">Adres e-mail:</label>
  <input type="email" id="email" name="email" required>

  <label for="postalCode">Kod pocztowy:</label>
  <input type="text" id="postalCode" name="postalCode" pattern="\d{2}-\d{3}" title="Wprowadź kod pocztowy w formacie XX-XXX." required>

  <label for="pesel">PESEL:</label>
  <input type="text" id="pesel" name="pesel" pattern="\d{11}" title="PESEL musi zawierać 11 cyfr." required>

  <label for="password">Hasło:</label>
  <input type="password" id="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Hasło musi mieć co najmniej 8 znaków, w tym jedną wielką literę, małą literę i cyfrę." required>

  <button type="submit">Wyślij</button>
</form>

Podsumowanie

Walidacja formularzy w HTML5 za pomocą atrybutów input oraz wyrażeń regularnych pozwala szybko i skutecznie sprawdzać poprawność danych wprowadzanych przez użytkowników. Dzięki wbudowanym mechanizmom, takim jak required, pattern czy type, twórcy stron mogą zapewnić użytkownikom intuicyjne i bezpieczne formularze. Wyrażenia regularne dodają zaś elastyczność i możliwość implementacji bardziej zaawansowanych reguł. Opanowanie tych narzędzi to ważny krok na drodze do tworzenia profesjonalnych aplikacji internetowych.