Wypróbuj

Nozbe - get things done

i zwiększ swoją produktywność

Natywna walidacja formularzy HTML5

4

Kolejnym głównym zagadnieniem wymaganym na egzaminie MCSD 70-480, jest dostęp i zabezpieczanie danych (ang. access and secure data). Pytania z tego zakresu stanowią 26% wszystkich pytań na egzaminie. W związku z tym, dzisiejszym postem rozpoczynam omawianie tego zagadnienia. Pierwszym z tematów jakie w ramach tego zagadnienia Microsoft zaleca poznać, jest kwestia wykorzystania, wprowadzonych w HTML5, elementów służących do tworzenia formularzy. Oprócz tego, wprowadzona została natywna walidacja formularzy HTML5 za pomocą odpowiednich atrybutów znaczników – ten temat również będzie tematem dzisiejszego wpisu. Zapraszam niniejszym do lektury! 😉

Kontrolki formularzy HTML5

Zgodnie z tym co napisałem we wstępie do dzisiejszego posta, w ramach HTML5 wprowadzono szereg nowych typów kontrolek formularzy. W paragrafie tym chciałbym omówić kilka najciekawszych z nich. Jednocześnie myślę, że każdy w swoim życiu wykonał już wiele formularzy HTML, dlatego nie będę tutaj wspominał o typach, które dostępne były wcześniej (czyli ‚text’, ‚password’, ‚file’, ‚hidden’, ‚checkbox’, ‚radio’, ‚submit’ oraz ‚button’) – jeśli ktoś mimo wszystko ich nie zna, zapraszam na przykład na strony w3schools.com.

Kontrolki

Generalnie, wraz z HTML5, pojawiło się trzynaście nowych typów „inputów’ formularzy. Poniżej ich lista, wraz z objaśnieniem i przykładem, jak wygląda w Twojej przeglądarce (UWAGA! Przykłady działają tylko w niektórych przeglądarkach, głównie Chrome i Opera… Jeśli przeglądarka nie obsługuje danego typu, zamiast tego wyświetla kontrolkę tak jakby była typu ‚text’):

  • color – pozwala na wybór koloru; obsługa – obecnie tylko Chrome i Opera
  • date – służy do wyboru daty (rok, miesiąc, dzień); nie pozwala wybrać strefy czasowej; obsługa – obecnie Chrome, Opera i Safari
  • datetime – tak samo jak ‚date’, z tym że pozwala wybrać także czas; obsługa – obecnie Safari i Opera
  • datetime-local – tak samo jak ‚datetime’, z tą różnicą, że powala na wybór strefy czasowej; obsługa – obecnie Safari i Opera
  • month – służy do wyboru daty z miesiącem; obsługa – obecnie Chrome, Opera i Safari
  • time – pozwala na wybór tylko czasu (godzina, minuty, sekundy, części sekundy); obsługa – obecnie Chrome, Opera i Safari
  • week – podobnie jak ‚month’ z tym, że wybiera się rok w wraz z numerem tygodnia w tym roku; obsługa – obecnie Chrome, Opera i Safari
  • email – pozwala na wpisanie adresu email; obsługa – obecnie Firefox, Chrome i Opera
  • number – służy do wprowadzania liczby; w połączeniu z atrybutami ‚min’, ‚max’ można ograniczyć zakres wprowadzanych liczb, natomiast z atrybutem ‚step’ pozwala na zdefiniowanie inkrementacji; obsługa – obecnie Chrome, Opera i Safari
  • range – wyświetla „slider’ czyli suwak; obsługa – obecnie Chrome, Opera i Safari
  • search – w zasadzie jest to samo co standardowy typ ‚text’ z tym, że może wyglądać inaczej na interfejsie użytkownika (zależy od przeglądarki); obsługa – obecnie Chrome i Safari
  • tel – również wygląda jak ‚text’ jednak służy do wprowadzania numerów telefonów i tak powinien być używany (zamiast ‚text’); obsługa – na razie żadna z głównych przeglądarek… 😉
  • url – podobnie, wygląda jak ‚text’ ale należy go używać jeśli oczekuje się wprowadzenia adresu URL; obsługa – obecnie Firefox, Chrome i Opera

Jak widać, Firefox (!) i IE traktują nowe kontrolki po macoszemu… Jeśli więc chcielibyście sprawdzić, jak wyglądają i zachowują się powyższe kontrolki, najlepiej sprawdzić to w Chrome lub Operze…

Atrybuty kontrolek

Wraz z powyższymi, nowymi typami kontrolek formularzy, w HTML5 pojawiły się też nowe atrybuty, które możemy do nich dodawać. Poniżej ich lista wraz z opisem:

  • autofocus – wartość boolowska, która wymusza automatyczny focus na kontrolce; tylko jedna kontrolka na stronie powinna mieć ustawioną tę wartość
  • placeholder – pozwala na podanie podpowiedzi do kontrolki; poniżej przykład (dla atrybutu ‚placeholder’ przypisano wartość ‚Napisz coś’):
  • required – atrybut walidacyjny; wartość boolowska oznaczająca, że dana kontrolka jest wymagana; jeśli pole nie zostanie wypełnione, formularz nie będzie mógł być wysłany
  • multiple – jej dodanie informuje do kontrolki typu ‚file’ pozwala na wybranie wielu plików na raz, a w przypadku kontrolki ’email’ pozwala na podanie wielu adresów email oddzielonych przecinkiem
  • pattern – atrybut walidacyjny; pozwala na wprowadzenie wyrażenia regularnego – wprowadzona do kontrolki wartość musi pasować do tego wyrażenia
  • autocomplete – przyjmuje dwie wartości: ‚on’ oraz ‚off’; określa, czy wartość wprowadzona ostatnio do kontrolki powinna zostać zapamiętana i wypełniać daną kontrolkę przy kolejnym wejściu na stronę
  • min oraz max – pozwala podać minimalną i maksymalną wartość jaką przyjmuje dana kontrolka; działa wraz z kontrolkami typu ‚number’ ale też na przykład ‚date’
  • step – definiuje krok inkrementacji wartości dla kontrolek typu ‚number’
  • list – wskazuje na element <datalist>, który zawiera dostępną listę wartości; poniżej przykład:
<input type="text" list="cars" />
<datalist id="cars">
  <option value="Ford">
  <option value="Renault">
  <option value="Skoda">
</datalist>

Powyższe pokazuje, że nowe kontrolki formularzy w HTML5 wraz z dostępnymi dla nich atrybutami, mogłoby być bardzo ciekawym narzędziem. Szkoda, że na razie nie są wystarczająco szeroko dostępne we wszystkich popularnych przeglądarkach. Niestety nadal trzeba posiłkować się bibliotekami JavaScript w celu uzyskania elementów typu „color picker” czy „datetime picker” jeśli chcemy by działało to wszędzie tak jak oczekujemy.

Wśród opisanych powyżej atrybutów, zauważyć można kilka służących walidacji. Przejdźmy zatem do kolejnego paragrafu.

Natywna walidacja formularzy HTML5

Poniżej przedstawiam jak wygląda obecnie natywna walidacja formularzy HTML5. Oczywiście, poniższe rozważania nie działają we wszystkich przeglądarkach… Jednak w części z nich, możemy przeprowadzić walidację po stronie klienta za pomocą atrybutów walidacyjnych.

Pole wymagane

Pierwszym z nich, jest opisany już wyżej atrybut ‚required’ – poniżej przykład definicji pola typu ‚text’ z ustawionym atrybutem ‚required’:

<input type="text" required />

A tutaj przykład formularza zawierającego taki element (kliknięcie przycisku ‚wyślij’ bez wypełnienia pola powinno spowodować wyświetlenie odpowiedniego komunikatu, oczywiście o ile Twoja przeglądarka obsługuje ten atrybut):

Walidacja e-mail

Kolejny przykład do kontrolka typu ’email’. W tym przypadku mamy do czynienia z walidacją automatyczna, bez użycia żadnych dodatkowych atrybutów. W przypadku, gdy w pole typu ’email’ wprowadzimy wartość, która nie jest adresem email, i spróbujemy zatwierdzić formularz, wyświetlony zostanie odpowiedni komunikat:

<input type="email" />

Można to przetestować poniżej (należy zwrócić uwagę, że jeśli nie wprowadzimy żadnego tekstu, walidacja email nie zadziała – tutaj należałoby dodać więc dodatkowo atrybut ‚required’):

Wzorzec

Następny atrybut walidacyjny to ‚pattern’ – tak jak napisałem wcześniej pozwala on na podanie wyrażenia regularnego, do którego pasować ma wprowadzany tekst. Możemy użyć go na przykład wraz z elementem typu ‚tel’:

<input type="tel" pattern="\d\d\d\-\d\d\d\d" title="xxx-xxxx" />

Można oczywiście używać dużo bardziej skomplikowanych wyrażeń niż w powyższym przykładzie. Poniżej formularz do przetestowania atrybutu ‚pattern’:

Zwróćmy uwagę, że wartość podana w atrybucie ‚title’ użyta jest w komunikacie błędu (w zależności od przeglądarki jest to tekst w stylu „Podaj wartość w wymaganym formacie. xxx-xxxx” – ten komunikat pochodzi z przeglądarki Chrome).

Ostatnią kwestią, o której chciałbym wspomnieć są dwa atrybuty pozwalające na wyłączenie walidacji dla całego formularza. Są to ‚novalidate’ oraz ‚formnovalidate’. Pierwszy z nich podajemy w tagu otwierającym formularz, a drugi umieszcza się w tagu przycisku ‚submit’. Wystarczy oczywiście użyć jedno z podanych sposobów by wyłączyć walidację formularza.

Podsumowanie

Niewątpliwie wprowadzenie nowych typów kontrolek formularzy oraz ich atrybutów jest ciekawym rozwiązaniem, które może w przyszłości znacznie usprawnić tworzenie formularz. Jak na razie jednak, z powodu słabego ich wsparcia ze strony przeglądarek, natywna walidacja formularzy HTML5 to nie jest coś na czym możemy polegać… Nadal głównym sposobem na walidację formularzy powinien być JavaScript. Z drugiej strony, z punktu widzenia semantyki języka HTML, należy zacząć je stosować w nowo tworzonych formularzach, tzn. do pobierania odpowiednich danych należy stosować przeznaczone do tego kontrolki, mimo że w wielu przeglądarkach nie wyglądają one i nie działają tak jak powinny.

Co do walidacji kontrolek wprowadzonej w HTML5, jest to na pewno ciekawe rozwiązanie, jednak zapewne przyda się tylko w przypadku prosty stron. Z punktu widzenia programisty ASP.NET MVC, walidacja jQuery dostępna w tym Frameworku daje dużo większe możliwości.

W kolejnym odcinku mojego kursu „MCSD 70-480” zajmiemy się walidacją formularzy za pomocą JavaScript. Zapraszam!

CHCESZ DARMOWEGO E-BOOKA?

Jeśli chcesz otrzymać mojego e-booka: Rozmowa Kwalifikacyjna - pytania z podstaw JavaScript zostaw mi swój e-mail:

Oprócz tego co poniedziałek dostaniesz maila z listą moich wpisów z poprzedniego tygodnia!