JavaScript w przeglądarce · Moduł 08

Walidacja formularzy i komunikaty błędów

Weryfikacja poprawności danych wejściowych, sprawdzanie pustych pól, okna alert() oraz blokowanie domyślnej wysyłki formularza.

45 min
16 slajdów
Notatki nauczyciela: N
Strona modułu: otwórz

Plan · 45 min

Co dziś robimy

12 minSprawdzanie obecności danych i pustych pól Samo porównanie pole.value === '' bywa zawodne, gdy użytkownik wpisze do kontrolki same…
12 minKomunikaty w oknie dialogowym i na stronie Funkcja alert(komunikat) otwiera modalne okienko z informacją tekstową i przyciskiem…
12 minObsługa formularza i blokowanie przeładowania Aby powstrzymać domyślną akcję wysyłki, podpinamy funkcję pod zdarzenie submit formularza…
4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
5 minPodsumowanie bilet wyjściowy i zadanie domowe

Atom 1 z 3 · ~12 min

Sprawdzanie obecności danych i pustych pól

Walidacja po stronie przeglądarki ma na celu natychmiastowe poinformowanie użytkownika o pominięciu wymaganych informacji lub wpisaniu nieprawidłowych wartości. Podstawową operacją jest weryfikacja, czy pole tekstowe nie pozostało puste.

Samo porównanie pole.value === '' bywa zawodne, gdy użytkownik wpisze do kontrolki same spacje.
Aby zabezpieczyć skrypt przed takim przypadkiem, stosuje się metodę .trim() , która usuwa białe znaki z początku i końca łańcucha tekstowego: if (pole.value.trim() ===…
Weryfikacja może obejmować również minimalną liczbę znaków (właściwość pole.value.length ), poprawność formatu lub sprawdzenie, czy wartość liczbowa mieści się w…
Gdy którekolwiek kryterium nie jest spełnione, wyświetlamy stosowny komunikat błędu i przerywamy dalsze wykonywanie operacji.

Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

function walidujRejestracje() {
  const login = document.getElementById('poleLogin').value.trim();
  const haslo = document.getElementById('poleHaslo').value.trim();
  const komunikat = document.getElementById('komunikatWalidacji');

  if (login === '' || haslo === '') {
    komunikat.textContent = 'Błąd: Wszystkie pola są wymagane!';
    komunikat.className = 'blad';
    return;
  }

  if (haslo.length < 6) {
    komunikat.textContent = 'Błąd: Hasło musi mieć co najmniej 6 znaków!';
    komunikat.className = 'blad';
    return;
  }

  komunikat.textContent = 'Konto ' + login + ' zostało pomyślnie zarejestrowane.';
  komunikat.className = 'sukces';
}

Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

function walidujRejestracje() {
  const login = document.getElementById('poleLogin').value.trim();
  const haslo = document.getElementById('poleHaslo').value.trim();
  const komunikat = document.getElementById('komunikatWalidacji');

  if (login === '' || haslo === '') {
    komunikat.textContent = 'Błąd: Wszystkie pola są wymagane!';
    komunikat.className = 'blad';
    return;
  }

  if (haslo.length < 6) {
    komunikat.textContent = 'Błąd: Hasło musi mieć co najmniej 6 znaków!';
    komunikat.className = 'blad';
    return;
  }

  komunikat.textContent = 'Konto ' + login + ' zostało pomyślnie zarejestrowane.';
  komunikat.className = 'sukces';
}

Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

Jaka metoda łańcucha znaków pozwala usunąć białe znaki z początku i końca tekstu przed sprawdzeniem, czy pole jest puste?

Atom 2 z 3 · ~12 min

Komunikaty w oknie dialogowym i na stronie

Informacje o wyniku walidacji można przekazać użytkownikowi na dwa główne sposoby: za pośrednictwem systemowego okna dialogowego lub bezpośrednio w strukturze dokumentu HTML.

Funkcja alert(komunikat) otwiera modalne okienko z informacją tekstową i przyciskiem zatwierdzenia.
Jest to najszybszy sposób zasygnalizowania błędu lub potwierdzenia akcji, jednak blokuje on dalszą interakcję ze stroną do momentu kliknięcia przycisku przez użytkownika.
Alternatywnym i bardzo elastycznym rozwiązaniem jest wpisanie komunikatu do dedykowanego elementu na stronie (np.
akapitu <p id="komunikat"> ) za pomocą właściwości textContent .

Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

function zatwierdzRezerwacje() {
  const klient = document.getElementById('imieKlienta').value.trim();
  const goscie = Number(document.getElementById('liczbaGosci').value);
  const potwierdzenie = document.getElementById('potwierdzenieRezerwacji');

  if (klient === '') {
    alert('Proszę podać imię i nazwisko osoby rezerwującej!');
    potwierdzenie.textContent = '';
    return;
  }

  if (goscie < 1 || goscie > 10) {
    alert('Liczba gości musi wynosić od 1 do 10 osób.');
    potwierdzenie.textContent = 'Błąd: nieprawidłowa liczba osób.';
    potwierdzenie.style.color = '#dc2626';
    return;
  }

  alert('Rezerwacja została pomyślnie przyjęta!');
  potwierdzenie.textContent = 'Zarezerwowano stolik dla ' + goscie + ' osób na nazwisko ' + klient + '.';
  potwierdzenie.style.color = '#16a34a';
}

Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

function zatwierdzRezerwacje() {
  const klient = document.getElementById('imieKlienta').value.trim();
  const goscie = Number(document.getElementById('liczbaGosci').value);
  const potwierdzenie = document.getElementById('potwierdzenieRezerwacji');

  if (klient === '') {
    alert('Proszę podać imię i nazwisko osoby rezerwującej!');
    potwierdzenie.textContent = '';
    return;
  }

  if (goscie < 1 || goscie > 10) {
    alert('Liczba gości musi wynosić od 1 do 10 osób.');
    potwierdzenie.textContent = 'Błąd: nieprawidłowa liczba osób.';
    potwierdzenie.style.color = '#dc2626';
    return;
  }

  alert('Rezerwacja została pomyślnie przyjęta!');
  potwierdzenie.textContent = 'Zarezerwowano stolik dla ' + goscie + ' osób na nazwisko ' + klient + '.';
  potwierdzenie.style.color = '#16a34a';
}

Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

Która funkcja języka JavaScript wyświetla proste modalne okno dialogowe z komunikatem i przyciskiem OK?

Atom 3 z 3 · ~12 min

Obsługa formularza i blokowanie przeładowania

Domyślnym zachowaniem przeglądarki po naciśnięciu przycisku <button type="submit"> lub klawisza Enter w formularzu jest wysłanie danych pod adres określony w atrybucie action i odświeżenie strony.

Aby powstrzymać domyślną akcję wysyłki, podpinamy funkcję pod zdarzenie submit formularza i wywołujemy metodę event.preventDefault() na przekazanym obiekcie zdarzenia.
Daje nam to pełną kontrolę nad procesem weryfikacji.
Jeżeli formularz przejdzie pomyślnie wszystkie etapy walidacji, możemy wyświetlić podsumowanie, a w razie potrzeby wyczyścić pola za pomocą wbudowanej metody…

Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

const formularz = document.getElementById('formKontakt');

formularz.addEventListener('submit', function(event) {
  event.preventDefault();

  const email = document.getElementById('poleEmail').value.trim();
  const zgoda = document.getElementById('zgodaRegulamin').checked;
  const status = document.getElementById('statusFormularza');

  if (email === '' || !email.includes('@')) {
    status.textContent = 'Błąd: Wpisz prawidłowy adres e-mail ze znakiem @';
    status.style.color = '#dc2626';
    return;
  }

  if (!zgoda) {
    status.textContent = 'Błąd: Musisz zaakceptować regulamin serwisu.';
    status.style.color = '#dc2626';
    return;
  }

  status.textContent = 'Zgłoszenie z adresu ' + email + ' wysłane pomyślnie!';
  status.style.color = '#16a34a';
  formularz.reset();
});

Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

const formularz = document.getElementById('formKontakt');

formularz.addEventListener('submit', function(event) {
  event.preventDefault();

  const email = document.getElementById('poleEmail').value.trim();
  const zgoda = document.getElementById('zgodaRegulamin').checked;
  const status = document.getElementById('statusFormularza');

  if (email === '' || !email.includes('@')) {
    status.textContent = 'Błąd: Wpisz prawidłowy adres e-mail ze znakiem @';
    status.style.color = '#dc2626';
    return;
  }

  if (!zgoda) {
    status.textContent = 'Błąd: Musisz zaakceptować regulamin serwisu.';
    status.style.color = '#dc2626';
    return;
  }

  status.textContent = 'Zgłoszenie z adresu ' + email + ' wysłane pomyślnie!';
  status.style.color = '#16a34a';
  formularz.reset();
});

Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

Jakie domyślne zachowanie przeglądarki występuje po wywołaniu zdarzenia submit formularza?

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

Samo porównanie pole.value === '' bywa zawodne, gdy użytkownik wpisze do kontrolki same spacje.
Funkcja alert(komunikat) otwiera modalne okienko z informacją tekstową i przyciskiem zatwierdzenia.
Aby powstrzymać domyślną akcję wysyłki, podpinamy funkcję pod zdarzenie submit formularza i wywołujemy metodę event.preventDefault() na przekazanym obiekcie…

Bilet wyjściowy: W którym miejscu funkcji walidującej należy umieścić instrukcję return, aby przerwać dalsze sprawdzanie po wykryciu błędu?
Odpowiedź: d) Bezpośrednio w bloku warunkowym if obsługującym wykryty błąd wejścia