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

Przeglądarki mają wbudowane funkcje sprawdzające, czy użytkownicy wprowadzili dane w prawidłowym formacie. Te funkcje możesz aktywować, używając odpowiednich elementów i atrybutów. Dodatkowo możesz ulepszyć walidację formularzy za pomocą CSS i JavaScriptu.

Dlaczego warto zweryfikować formularze?

W poprzednim module omówiliśmy, jak pomóc użytkownikom uniknąć ciągłego wprowadzania informacji w formularzach. Jak możesz pomóc użytkownikom wpisywać prawidłowe dane?

Wypełnienie formularza, nie wiedząc, które pola są wymagane, lub nie są objęte ograniczeniami, jest frustrujące. Na przykład wpisujesz nazwę użytkownika i przesyłasz formularz, tylko po to, by dowiedzieć się, że nazwa użytkownika musi składać się z co najmniej 8 znaków.

Możesz im w tym pomóc, definiując reguły weryfikacji i informując ich o nich.

Pomoc dla użytkowników przed przypadkowego pominięcia wymaganych pól

Za pomocą kodu HTML możesz określić prawidłowy format i ograniczenia dla danych wprowadzanych w formularzach. Musisz też określić, które pola są obowiązkowe.

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

Dzieje się tak z powodu atrybutu required.

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

Wiesz już, że możesz używać wielu innych typów, na przykład type="email". Przyjrzyjmy się wymaganym adresom e-mail <input>.

Spróbuj przesłać ten formularz bez wpisywania żadnych danych. Czy coś się zmieniło w porównaniu z wcześniejszą wersją demonstracyjną? Teraz wpisz swoje imię i nazwisko w polu adresu e-mail i spróbuj przesłać zgłoszenie. Pojawił się inny komunikat o błędzie. Jak to możliwe? Pojawia się inny komunikat, ponieważ podana wartość nie jest prawidłowym adresem e-mail.

Atrybut required informuje przeglądarkę, że to pole jest obowiązkowe. Przeglądarka sprawdza też, czy podane dane mają format type. Pole adresu e-mail pokazane w przykładzie jest prawidłowe tylko wtedy, gdy nie jest puste i podane dane to prawidłowy adres e-mail.

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

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

Wypróbuj wersję demonstracyjną. Jeśli wpiszesz mniej niż 8 znaków, po zmianie nie będzie można przesłać formularza.

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

Przekazywanie 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>

Upewnij się, że wszyscy użytkownicy rozumieją reguły weryfikacji. W tym celu połącz element sterujący formularza z elementem objaśniającym zasady. Aby to zrobić, dodaj atrybut aria-describedby do elementu z atrybutem id formularza.

Atrybut wzorca

Czasami warto zdefiniować bardziej zaawansowane reguły weryfikacji. Również w tym przypadku możesz użyć atrybutu HTML. Nosi on nazwę pattern i jako wartość 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 zmienisz ustawienie pattern, aby zezwalało też na używanie wielkich liter? Wypróbuj.

Dodaj style

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

Zmienianie stylu wymaganego pola formularza

Pokaż użytkownikowi, że pole jest obowiązkowe, zanim będzie mógł wejść w interakcję z formularzem.

Styl pól required możesz zmieniać za pomocą pseudoklasy CSS :required.

input:required {
  border: 2px solid;
}

Stylizowanie nieprawidłowych elementów sterujących formularza

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

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

Istnieje więcej sposobów dostosowywania stylów na podstawie weryfikacji. Z modułu o CSS dowiesz się więcej o określaniu stylów formularzy.

Weryfikacja za pomocą JavaScriptu

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

Wyświetlać przydatne komunikaty o błędach.

Wiesz już, że komunikaty o błędach nie są identyczne w każdej przeglądarce. Co zrobić, aby ta sama wiadomość docierała do wszystkich?

Aby to zrobić, użyj metody setCustomValidity() interfejsu 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. Odbieraj zdarzenie invalid zdefiniowanego elementu. Ta opcja jest ustawiona na setCustomValidity(). Jeśli dane są nieprawidłowe, w tym przykładzie wyświetla się komunikat Please enter your name..

Otwórz wersję demonstracyjną w różnych przeglądarkach. Wszędzie powinien wyświetlać się ten sam komunikat. Teraz spróbuj usunąć JavaScript i spróbuj ponownie. Ponownie pojawią się domyślne komunikaty o błędach.

Interfejs Constraint Validation API oferuje o wiele więcej możliwości. Szczegółowe informacje o korzystaniu z walidacji za pomocą JavaScriptu znajdziesz w kolejnym module.

Jak zweryfikować poprawność w czasie rzeczywistym Możesz dodać weryfikację w czasie rzeczywistym w języku JavaScript, nasłuchując zdarzenia onblur elementu sterującego formularza, i sprawdzać dane wejściowe natychmiast, gdy użytkownik opuści pole formularza.

Kliknij pole formularza w wersji demonstracyjnej, wpisz „web” i kliknij w innym miejscu na stronie. Pod polem formularza zobaczysz natywny komunikat o błędzie dla minlength.

Więcej informacji o implementowaniu weryfikacji w czasie rzeczywistym za pomocą JavaScriptu znajdziesz w kolejnym module.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat weryfikacji formularzy

Zasoby

• Wyłączanie przycisku płatności po przesłaniu formularza
• Dodawanie CSS do ulepszania formularza