HTML zapewnia wbudowaną walidację poprzez atrybuty, dzięki czemu przeglądarka blokuje nieprawidłowe wysyłki i wyświetla wiadomości — nie jest wymagany JavaScript.
html
Submit
HTML zapewnia wbudowaną walidację poprzez atrybuty, dzięki czemu przeglądarka blokuje nieprawidłowe wysyłki i wyświetla wiadomości — nie jest wymagany JavaScript.
Submit
Atrybuty walidacji: required, min/max, minlength/maxlength, pattern (regex) i sam typ (email, url, number). Przy wysyłaniu przeglądarka je sprawdza, zatrzymuje wysyłkę w przypadku niepowodzenia i wyświetla natywną bańkę na pierwszym nieprawidłowym polu.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Możesz czytać i dostosowywać walidację w JavaScript:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidity pozwala na dodawanie reguł, których atrybuty nie mogą wyrazić (np. "potwierdź hasło, które się zgadza").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Zawsze waliduj również na serwerze — walidacja po stronie klienta jest dla UX; użytkownicy mogą ją ominąć.
Natywna walidacja zapewnia dostępne, zlokalizowane komunikaty o błędach i natychmiastową opinię zwrotną za darmo.
Łącz deklaratywne atrybuty z Constraint Validation API dla reguł niestandardowych — ale nigdy nie polegaj na tym jako jedynej linii obrony; serwer również musi walidować.