Pomiń nawigację
Ćwiczenie · Informatyka Ćwiczenie: Napraw walidację formularza

Napraw walidację formularza

Treść zadania

Strona ćwiczenia zawiera formularz #formularzKontakt, pole #poleEmail i akapit #komunikatKontakt. W edytorze znajduje się szkic walidacji, ale został w nim popełniony błąd: wartość pola e-mail jest odczytywana tylko raz, przed dodaniem nasłuchiwacza zdarzenia.

Napraw kod tak, aby:

  1. przy każdym wysłaniu formularza odczytywać aktualną wartość pola i usuwać z niej spacje z brzegów,
  2. przy pustym polu lub adresie bez @ blokować wysyłkę przez event.preventDefault() i wpisywać komunikat Błąd: podaj poprawny e-mail.,
  3. przy poprawnym adresie nie blokować wysyłki i wpisywać komunikat Dane poprawne — formularz wysłany..

Nie zmieniaj tekstów komunikatów ani identyfikatorów elementów.

Co będzie oceniane

  • Odczyt aktualnej wartości pola wewnątrz obsługi zdarzenia submit.
  • Użycie trim() przed sprawdzeniem pustki i znaku @.
  • Blokowanie wysyłki i komunikat błędu tylko dla niepoprawnych danych.
  • Komunikat sukcesu i brak blokady dla poprawnego adresu.
  • Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.

Testy automatyczne (3)

  1. Poprawny e-mail nie blokuje wysyłki — tekst #komunikatKontakt = Dane poprawne — formularz wysłany.; zablokowany = nie
  2. Adres bez znaku @ blokuje wysyłkę — tekst #komunikatKontakt = Błąd: podaj poprawny e-mail.; zablokowany = tak
  3. Same spacje są traktowane jak puste pole — tekst #komunikatKontakt = Błąd: podaj poprawny e-mail.; zablokowany = tak

Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.

const formularz = document.getElementById("formularzKontakt");
const email = document.getElementById("poleEmail");
const komunikat = document.getElementById("komunikatKontakt");
const wartosc = email.value.trim();

formularz.addEventListener("submit", function (event) {
  if (wartosc === "" || !wartosc.includes("@")) {
    event.preventDefault();
    komunikat.textContent = "Błąd: podaj poprawny e-mail.";
    return;
  }
  komunikat.textContent = "Dane poprawne — formularz wysłany.";
});

Wskazówki

Wskazówka 1

Odczyt email.value.trim() przenieś do wnętrza funkcji obsługującej zdarzenie submit. Wtedy przy każdym wysłaniu pobierzesz aktualny tekst, a nie wartość z chwili ładowania strony.

Wskazówka 2

event.preventDefault() powinno znaleźć się tylko w gałęzi błędu. Dla poprawnych danych formularz ma przejść do domyślnej wysyłki.