INF.03 · JavaScript

Walidacja formularza w JavaScript przed wysłaniem

Pomóż poprawić dane, zanim trafią na serwer

  • Kod → próba → wniosek
  • DOM i zdarzenia
  • Własny projekt

Po tej lekcji: Połączysz walidację HTML z JS i odróżnisz ją od zabezpieczeń serwera.

Najpierw HTML, potem dodatkowa reguła

required wymaga wartości, type="email" sprawdza format (nie istnienie skrzynki), min/max/step określają liczby, minlength/maxlength długość. Obejrzyj checkValidity/reportValidity oraz validity. Własny komunikat ustawiasz setCustomValidity("opis"), a po naprawie musisz wyczyścić go pustym napisem.

Nie wysyłaj hasła przez GET

Rzeczywisty formularz rejestracji ma method="post", poprawny action, label i name przy polach. HTTPS szyfruje transport; POST sam nie szyfruje. W PHP nadal sprawdzamy dane, token CSRF i haszujemy hasło. JS może zostać wyłączony lub ominięty, więc nie stanowi zabezpieczenia konta. Używaj wyłącznie wymyślonych danych w demonstracji.

Dlaczego nie form.submit()?

submit() wywołane bezpośrednio pomija zdarzenie submit oraz walidację ograniczeń. Zwykle pozwól na normalne wysłanie prawidłowego formularza; requestSubmit() symuluje wysłanie z walidacją. W tym lokalnym modelu zawsze zatrzymujemy wysłanie i jawnie pokazujemy „dane poprawne — demo”, bez tworzenia konta i bez żądania sieciowego. W projekcie PHP masz właściwy przepływ serwerowy.

Najpierw krótki przykład, potem cały projekt

Każdy krótki przykład uruchamiaj osobno: w oddzielnym pliku skrypt.js lub na nowej pustej stronie. Nie doklejaj kilku przykładów z tym samym const do jednego pliku, bo ponowna deklaracja tej samej nazwy jest błędem. Przykłady konsolowe pokażą wynik w F12 → Console. Przy przykładach DOM najpierw utwórz wskazane elementy HTML i podłącz skrypt z defer. Fragment wymagający gotowego projektu jest tak oznaczony — wykonuj go w jego kontekście, nie jako pustą stronę.

Walidacja HTML i własny komunikat JS

Do body dodaj <form id="formularz"><input id="haslo" required minlength="12"><input id="powtorz" required minlength="12"><button>Sprawdź</button></form><p id="wynik"></p>. To lokalne fikcyjne dane, nie formularz zakładania kont.

Podstawowa forma: pole.setCustomValidity(tekstBledu); pusty napis usuwa własny błąd

validity-js.jsjavascript
const formularz = document.querySelector('#formularz');
const haslo = document.querySelector('#haslo');
const powtorz = document.querySelector('#powtorz');
function sprawdz() {
    const zgodne = haslo.value === powtorz.value;
    powtorz.setCustomValidity(zgodne ? '' : 'Hasła są różne');
}
haslo.addEventListener('input', sprawdz);
powtorz.addEventListener('input', sprawdz);
formularz.addEventListener('submit', (zdarzenie) => {
    zdarzenie.preventDefault();
    document.querySelector('#wynik').textContent = 'Poprawne — demo, bez wysyłania';
});
  1. value odczytuje oba napisy, === porównuje je. Operator warunek ? tak : nie wybiera pusty napis lub opis błędu.
  2. setCustomValidity z niepustym tekstem blokuje prawidłowe wysłanie. Po poprawce musisz przekazać "", a nie "OK", bo OK nadal byłoby błędem.
  3. Przeglądarka sprawdza required/minlength i własny błąd przed submit. Gdy walidacja nie przejdzie, nie wykona się ten listener submit.
  4. preventDefault zatrzymuje wysłanie poprawnego formularza w naszej demonstracji. Serwer w prawdziwej rejestracji musi wykonać własną walidację; JS można ominąć.

checkValidity, reportValidity i requestSubmit

Te metody nie tworzą konta i nie zapisują danych. Służą do kontroli formularza. Poniższy przykład dodaj do strony z <form id="formularz"><input name="email" type="email" required></form>.

Podstawowa forma: formularz.checkValidity() pyta o poprawność, formularz.reportValidity() również pokazuje błędy

validity-methods.jsjavascript
const formularz = document.querySelector('#formularz');
const poprawny = formularz.checkValidity();
console.log(poprawny);
if (!poprawny) {
    formularz.reportValidity();
}
  1. Puste wymagane pole powoduje false. !poprawny wchodzi wtedy do bloku i pokazuje komunikat walidacji.
  2. requestSubmit() inicjuje normalne wysłanie z walidacją i zdarzeniem submit. Bezpośrednie submit() pomija te etapy — nie używaj go jako obejścia błędu.
  3. type=email ocenia format, nie istnienie skrzynki. pattern określa dodatkowy wzorzec całej niepustej wartości; required osobno wymaga wypełnienia.

Jak czytać pozostałe zapisy w pełnym przykładzie

ZapisZnaczeniePrzykład użycia
warunek ? A : BWyrażenie warunkowe zwraca A przy prawdzie, B przy fałszu. Można go użyć po prawej stronie przypisania.gracz = gracz === "O" ? "X" : "O";
addEventListener / preventDefaultPierwsza metoda rejestruje funkcję na zdarzenie, druga zatrzymuje jego domyślną akcję (np.wysłanieformularza), nie usuwa innych listenerów.form.addEventListener("submit", e => e.preventDefault());
=== i !==Porównanie bez konwersji typów. Przypisanie ma pojedyncze =.7 === "7" // false

Sprawdź w działaniu

Sprawdź mechanizm na działającym przykładzie

Zmień dane, przewidź wynik i wykonaj próbę. To działający JavaScript tego modelu, nie interpreter dowolnego wklejonego kodu.

Ta interakcja wymaga włączonego JavaScriptu.

HTML w body pliku index.html

index.htmlhtml
<form id="formularz">
<label for="email">Email testowy</label><input id="email" type="email" required>
<label for="haslo">Hasło testowe (min. 12 znaków)</label><input id="haslo" type="password" minlength="12" required>
<label for="powtorz">Powtórz hasło</label><input id="powtorz" type="password" minlength="12" required>
<button>Sprawdź lokalnie</button></form><p id="wynik" role="status"></p>

Prześledź kod, potem zmień jedną rzecz

skrypt.jsjavascript
const formularz = document.querySelector("#formularz");
const haslo = document.querySelector("#haslo");
const powtorz = document.querySelector("#powtorz");
function sprawdzZgodnosc() {
    powtorz.setCustomValidity(haslo.value === powtorz.value ? "" : "Hasła muszą być takie same.");
}
haslo.addEventListener("input", sprawdzZgodnosc);
powtorz.addEventListener("input", sprawdzZgodnosc);
formularz.addEventListener("submit", (zdarzenie) => {
    zdarzenie.preventDefault(); // TYLKO lokalna demonstracja.
    document.querySelector("#wynik").textContent = "Dane poprawne — demo. Konto nie powstało.";
});

Odtwórz przykład u siebie

Zapisz pokazany JavaScript w skrypt.js, a HTML w body zwykłego dokumentu z <!doctype html>, lang="pl", meta charset="UTF-8" i tytułem. W head podłącz <script src="skrypt.js" defer></script>. Przykłady z samym console.log możesz wykonać też w konsoli własnej pustej strony. Nie wklejaj nieznanych skryptów do konsoli zalogowanych serwisów. F12 → Console: sprawdź błędy; Sources: ustaw breakpoint, obejrzyj zmienne i przejdź krokowo.

Ćwiczenie z pomocą · samodzielna praca

Twoja próba

Sprawdź pusty email, błędny format, dwa różne hasła i poprawny komplet. Naprawa ma usuwać stary komunikat.

Oczekiwany rezultat
Zapisz: dane → przewidywany wynik → wynik próby → wyjaśnienie.
Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź

Zacznij od działającego przykładu i przewidź wynik bez uruchamiania.

Krok 2 — pokaż podpowiedź

Zmień jedną instrukcję lub jedną wartość. Obejrzyj Console i stan DOM.

Krok 3 — pokaż podpowiedź

Dodaj przypadek pusty albo graniczny. Jeśli wynik jest inny, ustaw breakpoint.

Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.

Podsumowanie

Co warto zapamiętać

  1. Połączysz walidację HTML z JS i odróżnisz ją od zabezpieczeń serwera.
  2. Umiesz wskazać przyczynę wyniku w kodzie i sprawdzić przypadek graniczny.
  3. Quiz i dodatkowe zadania są w biurku; kod ocenia nauczyciel.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →
Źródła i dalsza nauka