MODUŁ 08

Walidacja formularzy i komunikaty błędów

PPrezentacja dla nauczyciela

Poprawne działanie aplikacji internetowej wymaga zabezpieczenia jej przed brakującymi lub błędnymi danymi. W tym module dowiesz się, jak sprawdzać wypełnienie pól, prezentować czytelne powiadomienia na stronie i w oknach alert oraz kontrolować moment wysyłki formularza.

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 dopuszczalnym przedziale. Gdy którekolwiek kryterium nie jest spełnione, wyświetlamy stosowny komunikat błędu i przerywamy dalsze wykonywanie operacji.

Zanim porównamy długość lub format, warto oczyścić wpisany tekst. Metoda replaceAll(' ', '') usuwa wszystkie wystąpienia podanego fragmentu — także spacje w środku numeru — natomiast replace() usuwa tylko pierwsze. Dzięki temu numer zapisany jako 500 600 700 zamienia się w 500600700 i można sprawdzić, czy ma dokładnie 9 znaków:

const numer = pole.value.replaceAll(' ', '');

if (numer.length !== 9) {
  wynik.textContent = 'Numer musi zawierać dokładnie 9 cyfr!';
} else {
  wynik.textContent = 'Numer telefonu poprawny';
}

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';
}

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

Metoda stripChars wywołana bezpośrednio na elemencie formularza Metoda trim usuwająca spacje, tabulatory oraz znaki nowej linii Metoda slice przyjmująca jako parametry indeksy skrajnych znaków Metoda removeSpaces konwertująca spacje na puste ciągi znaków

2. W jaki sposób najprościej sprawdzić w instrukcji warunkowej, czy pole hasło zawiera co najmniej 8 znaków?

Sprawdzając warunek hasloPole.value.length >= 8 Wywołując metodę hasloPole.countCharacters() >= 8 Odczytując właściwość hasloPole.size >= 8 Sprawdzając atrybut hasloPole.maxLength >= 8

3. Co zwróci wyrażenie pole.value === '' w sytuacji, gdy użytkownik wpisał w pole tekstowe wyłącznie spację bez użycia metody trim?

Wartość true, ponieważ spacja jest traktowana jako pusty znak Wyjątek ValidationError zgłoszony przez silnik przeglądarki Wartość false, ponieważ spacja stanowi niepusty znak w łańcuchu Specjalną wartość null oznaczającą brak znaków alfanumerycznych

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. Możemy wówczas dynamicznie zmienić wygląd powiadomienia, nadając mu odpowiedni kolor za pomocą element.style.color = '#dc2626' lub przypisując klasę CSS, np. element.className = 'blad'.

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';
}

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

Funkcja confirm przyjmująca treść pytania do zatwierdzenia Funkcja prompt oczekująca wprowadzenia danych przez użytkownika Funkcja notify tworząca wyskakujący dymek w rogu ekranu Funkcja alert wyświetlająca ostrzeżenie wymagające kliknięcia OK

5. Jaka jest zaleta wyświetlania błędów walidacji w elemencie akapitu na stronie zamiast ciągłego używania alert?

Nie blokuje interfejsu przeglądarki i pozwala użytkownikowi wygodnie poprawić dane Przyspiesza czas renderowania strony internetowej w silnikach przeglądarek Jest jedynym sposobem zapisu błędów formularza w lokalnej pamięci podręcznej Umożliwia automatyczną wysyłkę formularza bez wiedzy zalogowanego klienta

6. W jaki sposób zmienić kolor tekstu komunikatu błędu na czerwony za pomocą JavaScript?

Ustawiając właściwość element.fontColor = 'red' Zmieniając właściwość element.style.color = 'red' Wywołując metodę element.setAttributeColor('red') Przypisując wartość element.cssText = 'color: red'

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. W przypadku aplikacji działających wyłącznie w przeglądarce przeładowanie to skasowałoby wprowadzone dane i wyświetlone wyniki.

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 formularz.reset().

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();
});

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

Zresetowanie zawartości wszystkich pól formularza do wartości pustych Zamknięcie bieżącej karty przeglądarki i otwarcie nowego okna Przeładowanie strony lub przejście pod adres wskazany w atrybucie action Wyświetlenie komunikatu systemowego z prośbą o potwierdzenie wysyłki

8. Która metoda obiektu zdarzenia zatrzymuje domyślne przeładowanie strony po zatwierdzeniu formularza?

Metoda event.stopAction() Metoda event.preventDefault() Metoda event.cancelBubble() Metoda event.haltExecution()

9. W którym miejscu funkcji walidującej należy umieścić instrukcję return, aby przerwać dalsze sprawdzanie po wykryciu błędu?

W sekcji nagłówkowej całego pliku skryptu przed definicją funkcji Na samym końcu skryptu po dodaniu wszystkich nasłuchiwaczy zdarzeń Wewnątrz arkusza stylów CSS w regule określającej wygląd formularza Bezpośrednio w bloku warunkowym if obsługującym wykryty błąd wejścia

Walidacja formularzy i komunikaty błędów

Sprawdzanie obecności danych i pustych pól

Komunikaty w oknie dialogowym i na stronie

Obsługa formularza i blokowanie przeładowania

Ćwiczenia