„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.