70-480 – Sprawdzanie poprawności danych wejściowych użytkownika przy użyciu elementów HTML5

70-480

Wybór odpowiednich środków kontroli na podstawie wymagań; wdrażanie elementów wejściowych typu HTML i atrybutów zawartości (np. wymaganych) do zbierania danych wejściowych użytkownika.



Dzisiejszym wpisem rozpoczynam kolejny rozdział materiału, który pozwala przygotować się do egzaminu 70-480. Będą to cztery artykuły na temat walidacji danych za pomocą kontrolek HTML5 i kodu JavaScript oraz przesyłaniu danych w różnych formatach do części backendowej, a także pobieranie danych z serwera, ich serializacja, deserializacja oraz enkodowanie.

Zaczniemy od sprawdzania poprawności danych wejściowych użytkownika przy użyciu elementów HTML5. Specyfikacja kolejnej wersji HTML przewidziała sporo komponentów, które pozwalają na walidację danych w prosty i przyjemny sposób, przy użyciu kontrolek formularzy z odpowiednimi atrybutami i parametrami.

Posłużę się tutaj rozbudowanym przykładem, który pozwoli mi od razu zaprezentować możliwości tych kontrolek. Każdy z typów pola input pozwala na zdefiniowanie formatu danych, który wybrać / podać może użytkownik.

UWAGA: Nie wszystkie przeglądarki poprawnie obsługują nowe kontrolki. W przypadku braku obsługi, kontrolka będzie wyglądać jak zwykłe pole typu text. Obsługę danego typu w przeglądarce możemy sprawdzić na stronie: caniuse.com

Poza samymi formatami pola input możemy korzystać także z dodatkowych atrybutów, które zapewnią nam walidację wprowadzanych danych bez dodatkowego kodu JavaScript:

  • autofocus [boolean] – automatyczny focus na danej kontrolce – tylko jedna powinna mieć taką wartość
  • required [boolean] – atrybut określający, że dane pole jest wymagane i nie może być puste
  • pattern [string] – atrybut, który pozwala podać jako swoją wartość wyrażenie regularne, które będzie musiała spełniać wartość wprowadzona w daną kontrolkę
  • placeholder [string] – wartość podana w tym atrybucie będzie się wyświetlać w danej kontrolce, gdy będzie ona pusta – znika po wpisaniu wartości
  • autocomplete [string|”on””off”] – przyjmuje wartość “on” | “off” i określa, czy przeglądarka ma pamiętać wartość wprowadzoną dla danej kontrolki
  • min [integer] – minimalna wartość dla pól typu number oraz range
  • max [integer] – maksymalna wartość dla pól typu number oraz range
  • step [integer] – wielkość skoku dla pola typu range

Spójrzmy na przykład pokazujący użycie owych atrybutów:

Te oraz wiele innych atrybutów opisanych w oficjalnej specyfikacji pozwalają na łatwą, ale co ważne podstawową walidację wprowadzanych danych przez użytkowników.