Pomóż użytkownikom wpisywać właściwe dane w formularzach

Przeglądarki mają wbudowaną funkcję weryfikacji, która umożliwia sprawdzanie, czy dane wpisywane przez użytkowników są w prawidłowym formacie. Te funkcje możesz aktywować, używając odpowiednich elementów i atrybutów. Ponadto możesz ulepszyć weryfikację formularza za pomocą arkuszy CSS i JavaScript.

Dlaczego warto weryfikować formularze?

W poprzednim module omówiliśmy, jak pomóc użytkownikom uniknąć konieczności ciągłego wykonywania tych samych czynności ponownie wpisać informacje w formularzach. Jak możesz pomóc użytkownikom w przesyłaniu prawidłowych danych?

Wypełnianie formularza bez wiedzy o wymaganych polach jest irytujące. lub ograniczeń tych pól. Na przykład wpisujesz nazwę użytkownika i przesyłasz formularz – okaże się, że nazwa użytkownika musi mieć co najmniej osiem znaków.

Aby pomóc użytkownikom, zdefiniuj reguły weryfikacji i poinformuj o nich.

Zapobieganie przypadkowemu pomijaniu wymaganych pól

Możesz użyć kodu HTML, aby określić właściwy format i ograniczenia dla danych wpisywanych w formularzach. Musisz też określić, które pola są obowiązkowe.

Spróbuj przesłać ten formularz bez wprowadzania danych. Czy do <input> widzisz komunikat o błędzie informujący, że to pole jest wymagane?

Przyczyną jest atrybut required.

<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">

Wiesz już, że możesz używać znacznie więcej typów, na przykład type="email". Przyjrzyjmy się wymaganemu adresowi e-mail <input>.

Spróbuj przesłać ten formularz bez wprowadzania danych. Czy są jakieś różnice w stosunku do wcześniejszej wersji demonstracyjnej? Teraz wpisz swoje imię i nazwisko w polu adresu e-mail i spróbuj przesłać zgłoszenie. Wyświetlany jest inny komunikat o błędzie. Jak to możliwe? Otrzymujesz inną wiadomość, ponieważ wpisana wartość nie jest prawidłowym adresem e-mail.

Atrybut required informuje przeglądarkę, że to pole jest obowiązkowe. Przeglądarka sprawdza też, czy wpisane dane są zgodne z formatem elementu type. Pole adresu e-mail widoczne w przykładzie jest prawidłowe tylko wtedy, gdy nie jest puste, a wpisane dane są prawidłowym adresem e-mail.

Pomóż użytkownikowi wpisać prawidłowy format

Wiesz już, jak ustawić pole jako obowiązkowe. Jak poinstruujesz przeglądarkę, że użytkownik musi wpisać w polu formularza co najmniej 8 znaków?

Wypróbuj wersję demonstracyjną. Jeśli wprowadzisz zmiany krótsze niż osiem znaków, przesłanie formularza nie będzie możliwe.

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">

Podawanie reguł weryfikacji

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

Dopilnuj, aby wszyscy użytkownicy rozumieli reguły weryfikacji. W tym celu połącz element sterujący formularza z elementem wyjaśniającym zasady. Aby to zrobić, dodaj atrybut aria-describedby do elementu z id formularza.

Atrybut wzoru

Czasem konieczne jest zdefiniowanie bardziej zaawansowanych reguł weryfikacji. Także w tym przypadku możesz użyć atrybutu HTML. Ma nazwę pattern. Możesz zdefiniować wyrażenie regularne.

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

Dozwolone są tylko małe litery. użytkownik musi wpisać od dwóch do dwudziestu znaków.

Jak zmienić pattern, by zezwalać też na wielkie litery? Wypróbuj

Dodaj style

Wiesz już, jak dodać sprawdzanie poprawności w kodzie HTML. Czy nie byłoby też wspaniale, gdyby można było również dostosować styl elementów sterujących formularza na podstawie stanu weryfikacji? Jest to możliwe dzięki CSS.

Jak dostosować styl wymaganego pola formularza

Pokaż użytkownikowi, że pole jest obowiązkowe, zanim wejdzie w interakcję z Twoim formularzem.

Do pól required możesz dodać styl za pomocą pseudoklasy CSS :required.

input:required {
  border: 2px solid;
}

Nieprawidłowe elementy sterujące formularza

Pamiętasz, co się dzieje, gdy dane wpisane przez użytkownika są nieprawidłowe? Pojawi się komunikat o błędzie dołączony do elementu sterującego formularza. Czy nie byłoby wspaniale przystosować wygląd elementu, gdy tak się dzieje?

Możesz użyć pseudoklasy :invalid. aby dodać style do nieprawidłowych elementów sterujących formularza. Oprócz tego istnieje też pseudoklasa :valid do określania prawidłowych elementów formularza.

Jest więcej sposobów na dostosowanie stylów na podstawie weryfikacji. W module CSS dowiesz się więcej o stylach formularzy.

Walidacja za pomocą JavaScriptu

Aby jeszcze bardziej polepszyć weryfikację formularzy, możesz użyć JavaScript Constraint Validation API.

Podawaj istotne komunikaty o błędach.

Wiesz już, że komunikaty o błędach nie są takie same w każdej przeglądarce. Jak możesz wyświetlić ten sam komunikat wszystkim użytkownikom?

W tym celu użyj metody setCustomValidity() Constraint Validation API. Zobaczmy, jak to działa.

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

Wyślij zapytanie do elementu, w którym chcesz ustawić niestandardowy komunikat o błędzie. Wysłuchaj zdarzenia invalid zdefiniowanego elementu. Tam została wysłana wiadomość z adresem setCustomValidity(). W tym przykładzie wyświetla się komunikat Please enter your name., jeśli dane wejściowe są nieprawidłowe.

Otwórz wersję demonstracyjną w różnych przeglądarkach, wszędzie zobaczysz ten sam komunikat. Teraz usuń JavaScript i spróbuj ponownie. Pojawią się ponownie domyślne komunikaty o błędach.

Interfejs Constraint Validation API pozwala robić znacznie więcej. Szczegółowe informacje na temat korzystania z JavaScript, które znajdziesz w jednym z kolejnych modułów.

Jak weryfikować w czasie rzeczywistym Aby dodać weryfikację w czasie rzeczywistym w JavaScript, możesz nasłuchiwać zdarzenia onblur elementu sterującego formularza i sprawdzać dane wejściowe od razu, gdy użytkownik opuści pole formularza.

Kliknij pole formularza w wersji demonstracyjnej. wpisz „web” i kliknij inne miejsce na stronie. Pod polem formularza zobaczysz natywny komunikat o błędzie dotyczący elementu minlength.

Więcej informacji o wdrażaniu weryfikację w czasie rzeczywistym za pomocą JavaScriptu, którą udostępnimy w kolejnym module.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o weryfikacji formularzy

Zasoby

• Wyłączanie przycisku płatności po przesłaniu formularza
• Dodawanie CSS, aby formularz działał lepiej