Walidacja formularza w JavaScript polega na sprawdzaniu poprawności danych bezpośrednio w przeglądarce użytkownika, czyli po stronie klienta. Dzięki temu można reagować natychmiast podczas wpisywania danych, np. sprawdzić, czy pole nie jest puste, czy e-mail zawiera znak @, albo czy hasło ma wymaganą długość.
Dlaczego JavaScript?
JavaScript działa w przeglądarce, dlatego nadaje się do walidacji w czasie rzeczywistym. Może obsługiwać zdarzenia formularza, takie jak:
- input - podczas wpisywania danych,
- change - po zmianie wartości pola,
- submit - przy próbie wysłania formularza.
Przykład
const email = document.querySelector('#email');
email.addEventListener('input', () => {
if (!email.value.includes('@')) {
email.setCustomValidity('Podaj poprawny e-mail');
} else {
email.setCustomValidity('');
}
});
Ważne na egzaminie
Walidacja w JavaScript poprawia wygodę użytkownika, ale nie zastępuje walidacji po stronie serwera. Użytkownik może wyłączyć JavaScript albo wysłać dane w inny sposób. Dlatego dane przed zapisem do bazy powinny być sprawdzone również w skrypcie serwerowym, np. PHP.