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">
Nazwa atrybutu to minlength
.
Ustaw wartość na 8
i uzyskuj pożądaną regułę weryfikacji.
Jeśli wolisz odwrotnie, użyj maxlength
.
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.
Prawidłowa odpowiedź to pattern="[a-zA-Z]{2,20}"
.
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
Jakiego atrybutu używasz, aby elementy sterujące formularzem były obowiązkowe?
required
needed
essential
obligatory
Czy możesz zdefiniować własne komunikaty o błędach?
message
.:invalid
.Możesz przesłać właściwość <input>
z atrybutem type="email"
i required
: