Atrybuty walidacji formularzy
Stosuj atrybuty required, minlength, maxlength, pattern, min, max i step oraz stylizuj stany walidacji za pomocą pseudoklas :valid i :invalid.
Atrybuty walidacji formularzy to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Natywna walidacja przeglądarki
HTML5 zapewnia wbudowaną walidację formularzy za pomocą atrybutów. Po przesłaniu formularza przeglądarka sprawdza każde pole. Jeśli walidacja się nie powiedzie, wyświetla natywną podpowiedź z błędem i blokuje przesłanie formularza — w podstawowych przypadkach JavaScript nie jest potrzebny.
required
Dodanie atrybutu required do pola wejściowego, elementu select lub textarea sprawia, że pole staje się wymagane. Jeśli podczas przesyłania formularza jest puste, przeglądarka wyświetli błąd.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength i maxlength
minlength wymusza minimalną liczbę znaków. maxlength uniemożliwia wprowadzenie większej liczby znaków niż określone maksimum. Można połączyć oba atrybuty, aby wymusić złożoność hasła lub ograniczyć długość komentarzy.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min, max i step dla pól liczbowych
min i max określają prawidłowy zakres dla pól typu number i date. step określa przyrost — jest przydatny w przypadku zakresów (5%), precyzji dziesiętnej i samych dat.
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — walidacja za pomocą wyrażenia regularnego
pattern przyjmuje wyrażenie regularne JavaScript. Aby formularz mógł zostać przesłany, wartość pola musi pasować do wzorca. Należy dodać atrybut title, aby opisać oczekiwany format w podpowiedzi z błędem wyświetlanej przez przeglądarkę.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — wyłączanie natywnej walidacji
Dodanie novalidate do elementu <form> wyłącza całą natywną walidację przeglądarki. Należy to zrobić podczas implementowania własnej walidacji w JavaScript, aby użytkownik otrzymał jednolity sposób obsługi formularza.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>Sprawdzanie poprawności w JavaScript
Constraint Validation API umożliwia programowe sprawdzanie poprawności: input.validity (obiekt ValidityState), input.checkValidity() (zwraca wartość logiczną), input.setCustomValidity(message) (ustawia niestandardowy błąd).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
Wywołaj setCustomValidity(message) z niepustym ciągiem znaków, aby oznaczyć pole jako niepoprawne i wyświetlić niestandardowy komunikat. Wywołaj tę metodę z pustym ciągiem, aby usunąć błąd. Jest to przydatne w przypadku pól sprawdzanych po stronie serwera, na przykład unikalności nazwy użytkownika.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}Pseudoklasy :valid i :invalid
Stylizuj poprawne i niepoprawne pola za pomocą pseudoklas CSS. Zachowaj ostrożność: pola mają stan :invalid, zanim użytkownik wejdzie z nimi w interakcję. Użyj :user-invalid (w nowoczesnych przeglądarkach) albo JavaScriptu, aby najpierw dodać klasę „touched”.
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }Niestandardowe komunikaty o błędach za pomocą reportValidity
form.reportValidity() uruchamia natywny interfejs sprawdzania poprawności przeglądarki dla wszystkich pól. Użyj tej metody po ustawieniu niestandardowych komunikatów walidacji, aby wyświetlić je użytkownikowi bez czekania na zdarzenie submit.
Wzorzec dostępnego wyświetlania błędów
Wyświetlaj błędy bezpośrednio przy polach: 1) ustaw aria-invalid="true" na polu, 2) dodaj widoczny akapit z błędem połączony za pomocą aria-describedby, 3) przenieś fokus na pierwsze niepoprawne pole. Dzięki temu rozwiązanie jest dostępne dla wszystkich użytkowników, w tym osób korzystających z czytników ekranu.
Szybki test
Który atrybut ogranicza pole tekstowe do maksymalnie 280 znaków?
Podsumowanie: atrybuty walidacji formularzy
required, minlength/maxlength, min/max/step, pattern — wszystkie zapewniają natywną walidację przeglądarki bez dodatkowego kodu. Użyj novalidate, gdy implementujesz własną walidację w JavaScript. Constraint Validation API udostępnia JavaScriptowi stan poprawności. Stylizuj błędy za pomocą :user-invalid po wejściu użytkownika w interakcję z polem.
Często zadawane pytania
Czy lekcja „Atrybuty walidacji formularzy” jest bezpłatna?
Tak — pełny tekst „Atrybuty walidacji formularzy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Atrybuty walidacji formularzy”?
Stosuj atrybuty required, minlength, maxlength, pattern, min, max i step oraz stylizuj stany walidacji za pomocą pseudoklas :valid i :invalid. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Atrybuty walidacji formularzy”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Elementy formularzy: typy input, select, textarea
- ARIA i dostępność: label, role, aria-*
- Semantyczny HTML5: semantyka a zupa divów
- Atrybuty walidacji formularzy