Walidacja formularzy HTML

W rozdziale:

Sprawdzanie poprawności danych w formularzu

Obsługa funkcji weryfikacji danych formularzy
IE	Firefox	Safari	Chrome	Opera	iPhone	Android
10.0+	4.0+	5.0+	10.0+	9.0+	·	·

Do tej pory skupiałem się na nowych elementach i funkcjach formularzy HTML5, ale najciekawsze zostawiłem na koniec: w HTML5 dostępna jest automatyczna weryfikacja danych formularzy. Weźmy na przykład często spotykany przypadek pobierania adresu e-mail za pomocą formularza. Najczęściej implementuje się jakąś funkcję weryfikacyjną w JavaScripcie, wspieraną dodatkowo przez działający na serwerze skrypt w PHP, Pythonie lub jeszcze jakimś innym języku. Algorytmów weryfikacyjnych działających po stronie serwera za pomocą języka HTML5 nie da się zastąpić, ale tego typu skrypty JavaScript mogą wkrótce odejść do lamusa.

Sprawdzanie poprawności adresów e-mail przy użyciu JavaScriptu ma dwie wady:

Zaskakująco duża liczba odwiedzających (nawet około 10%) ma wyłączony JavaScript.
Łatwo popełnić błąd.

Naprawdę, znając życie to prawie na pewno popełnisz gdzieś błąd. Zweryfikowanie czy dowolny losowy ciąg znaków reprezentuje poprawnie zbudowany adres e-mail jest nieprawdopodobnie skomplikowane. Im więcej o tym myślisz, tym trudniejsze się to robi. Czy już mówiłem, że to bardzo skomplikowane? Czy nie byłoby prościej zrzucić cały ten problem na przeglądarkę?

Większość nowych przeglądarek obsługuje elementy type=“email”

To jest zrzut z Opery 11, chociaż funkcja ta działa w tej przeglądarce od wersji 9. Podobne udogodnienia mają też Firefox 4 i Chrome 10. Aby z tego dobrodziejstwa korzystać, wystarczy tylko ustawić atrybut type na "email". Gdy użytkownik zatwierdzi formularz zawierający pole <input type="email">, przeglądarka automatycznie sprawdzi wpisany adres wg standardu RFC, nawet gdy obsługa skryptów będzie wyłączona.

W HTML5 w podobny sposób można też weryfikować adresy internetowe wpisane w pole <input type="url"> oraz liczby w polu <input type="number">. W przypadku liczb brane są nawet pod uwagę wartości atrybutów min i max, dzięki czemu jeśli ktoś wpisze za małą albo za dużą liczbę, to nie uda mu się wysłać formularza.

Modułu weryfikacji danych formularzy HTML5 nie trzeba włączać, ponieważ jest on włączony domyślnie. Aby go wyłączyć, należy użyć atrybutu novalidate.

Nie sprawdzaj mnie, koleś

<form novalidate>
  <input type="email" id="addr">
  <input type="submit" value="Subskrybuj">
</form>

Aplikacje offline Kurs HTML5 Mikrodane