Walidacja formularza po stronie klienta

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Czym jest walidacja formularza po stronie klienta?

Walidacja formularza po stronie klienta to sprawdzanie poprawności danych wpisanych przez użytkownika bezpośrednio w przeglądarce, zanim formularz zostanie wysłany na serwer. Najczęściej wykonuje się ją za pomocą języka JavaScript.

Celem walidacji jest szybkie wykrycie błędów, np. pustego pola, niepoprawnego adresu e-mail albo zbyt krótkiego hasła.

Przykłady sprawdzanych danych

Walidacja może obejmować:

  • czy wymagane pole nie jest puste,
  • czy adres e-mail ma poprawny format,
  • czy hasło ma odpowiednią długość,
  • czy użytkownik zaznaczył wymagany checkbox,
  • czy liczba mieści się w określonym zakresie.

Dlaczego używa się JavaScript?

JavaScript działa w przeglądarce użytkownika, dlatego może natychmiast reagować na błędy bez przeładowywania strony. To poprawia wygodę użytkownika i zmniejsza liczbę niepotrzebnych żądań wysyłanych do serwera.

Przykład

<form onsubmit="return sprawdz()">
  <input type="email" id="email">
  <button type="submit">Wyślij</button>
</form>

<script>
function sprawdz() {
  const email = document.getElementById("email").value;

  if (!email.includes("@")) {
    alert("Podaj poprawny adres e-mail");
    return false;
  }

  return true;
}
</script>

Jeśli adres e-mail nie zawiera znaku @, formularz nie zostanie wysłany.

Ważne ograniczenie

Walidacja po stronie klienta nie wystarcza do zapewnienia bezpieczeństwa. Użytkownik może wyłączyć JavaScript lub zmodyfikować kod strony. Dlatego dane trzeba dodatkowo sprawdzać także po stronie serwera, np. w PHP.