Walidacja formularza w JavaScript przed wysłaniem

Po co się tego uczymy?

To domknięcie całego działu JavaScript: łączysz zmienne, funkcje, zdarzenia i DOM w jeden praktyczny mechanizm, który realnie poprawia doświadczenie użytkownika (natychmiastowa informacja o błędzie, bez czekania na odpowiedź serwera) — a jednocześnie uczysz się, dlaczego to i tak nie wystarcza jako jedyne zabezpieczenie.

Teoria

HTML5 (Lekcja 4 działu HTML i CSS) daje prostą, wbudowaną walidację, ale JavaScript pozwala na dużo bardziej elastyczne sprawdzanie — np. porównanie DWÓCH pól ze sobą (czy hasło i powtórzone hasło są identyczne), czego sam HTML5 nie potrafi.

Kluczowy mechanizm: nasłuchujesz zdarzenia submit na formularzu, a wewnątrz funkcji obsługującej wywołujesz event.preventDefault() — to ZATRZYMUJE domyślne wysłanie formularza, dając Ci szansę na sprawdzenie danych. Jeśli walidacja się powiedzie, możesz albo pozwolić na normalną wysyłkę, albo wysłać dane samodzielnie (bardziej zaawansowana technika, poza zakresem tego kursu).

Bardzo ważne zastrzeżenie, które domyka cały ten dział: walidacja JavaScript, podobnie jak walidacja HTML5, działa TYLKO w przeglądarce użytkownika i można ją całkowicie ominąć (wyłączając JavaScript albo wysyłając dane z pominięciem formularza). Dlatego, mimo starannej walidacji po stronie klienta, PHP (Lekcja 8 działu Aplikacje internetowe PHP) i tak MUSI zweryfikować te same dane ponownie po stronie serwera — to jedyne miejsce, któremu można naprawdę zaufać, bo złośliwy użytkownik nie ma nad nim kontroli.

Schemat

Użytkownik klika "Wyślij"
          |
          v
zdarzenie "submit" -> event.preventDefault()  (zatrzymaj wysyłkę)
          |
          v
walidacja JS: czy pola wypełnione? czy hasła się zgadzają?
          |
      ┌───┴───┐
      NIE     TAK
      |         |
pokaż błąd   formularz wysyłany naprawdę (do PHP)
(nic nie wysyłaj)

Przykład z życia

Kiedy próbujesz zarejestrować się na jakiejkolwiek stronie i natychmiast, bez przeładowania, widzisz komunikat "Hasła nie są identyczne" — to właśnie taka walidacja JavaScript wykonana PRZED wysłaniem formularza do serwera.

Kod (JavaScript)

<form id="formularzRejestracji">
    <input type="text" id="email" placeholder="E-mail">
    <input type="password" id="haslo" placeholder="Hasło">
    <input type="password" id="powtorzHaslo" placeholder="Powtórz hasło">
    <p id="komunikatBledu" style="color: red;"></p>
    <button type="submit">Zarejestruj się</button>
</form>

<script>
    const formularz = document.getElementById("formularzRejestracji");
    const komunikatBledu = document.getElementById("komunikatBledu");

    formularz.addEventListener("submit", function (event) {
        event.preventDefault(); // zatrzymaj domyślną wysyłkę, dopóki nie sprawdzimy danych

        const email = document.getElementById("email").value;
        const haslo = document.getElementById("haslo").value;
        const powtorzHaslo = document.getElementById("powtorzHaslo").value;

        if (email === "" || haslo === "") {
            komunikatBledu.textContent = "Wypełnij wszystkie pola.";
            return;
        }

        if (haslo !== powtorzHaslo) {
            komunikatBledu.textContent = "Hasła nie są identyczne.";
            return;
        }

        komunikatBledu.textContent = "";
        console.log("Dane poprawne - formularz można wysłać do PHP.");
        formularz.submit(); // dopiero teraz faktyczna wysyłka danych
    });
</script>

Komentarz i wyjaśnienie kodu

event.preventDefault() jest kluczowe — bez tej linijki formularz zostałby wysłany NATYCHMIAST po kliknięciu "Zarejestruj się", zanim jakikolwiek kod walidujący zdążyłby się wykonać. Instrukcja return; wewnątrz if przerywa dalsze wykonywanie funkcji, gdy walidacja się nie powiedzie — dzięki temu formularz.submit() na końcu wykona się TYLKO wtedy, gdy oba warunki błędu zostały pominięte.

Ćwiczenie samodzielne

Dodaj do formularza walidację sprawdzającą, czy pole e-mail zawiera znak @ (metoda .includes("@") na tekście).

Zadania do pracy własnej

Zbuduj formularz logowania z walidacją JS sprawdzającą, czy oba pola (e-mail, hasło) są niepuste przed wysłaniem.
Rozbuduj walidację hasła o sprawdzenie długości (co najmniej 8 znaków) z osobnym komunikatem błędu dla tego przypadku.
Zbuduj pełną walidację formularza rejestracji do serwisu filmowego: e-mail (zawiera @), hasło (min. 8 znaków), powtórzone hasło (identyczne z hasłem), checkbox akceptacji regulaminu (musi być zaznaczony) — każdy błąd z osobnym, czytelnym komunikatem, formularz wysyłany dopiero gdy WSZYSTKIE warunki są spełnione.

Typowe błędy

Najpoważniejszy błąd koncepcyjny to przekonanie, że walidacja JavaScript CHRONI dane — nie chroni, jedynie POPRAWIA wygodę uczciwego użytkownika. Backend (PHP) musi i tak sprawdzić wszystko od nowa. Drugi, techniczny błąd: zapomnienie event.preventDefault(), przez co formularz wysyła się zanim walidacja zdąży zadziałać. Trzeci: brak return po wykryciu błędu, przez co kod "leci dalej" i mimo wykrytego błędu formularz i tak zostaje wysłany.

Nawiązanie do egzaminu zawodowego

To domknięcie efektu INF.03.5.3 w całości ("programuje skrypty wykonywane po stronie klienta") oraz naturalny pomost do efektu INF.03.5.4 ("programuje skrypty wykonywane po stronie serwera") realizowanego w dziale Aplikacje internetowe PHP — a konkretnie do Lekcji 8 tamtego działu, gdzie te same dane są walidowane PONOWNIE, tym razem w sposób, którego złośliwy użytkownik nie może ominąć.