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:
- przy każdym wysłaniu formularza odczytywać aktualną wartość pola i usuwać z niej spacje z brzegów,
- przy pustym polu lub adresie bez
@blokować wysyłkę przezevent.preventDefault()i wpisywać komunikatBłąd: podaj poprawny e-mail., - 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)
- Poprawny e-mail nie blokuje wysyłki — tekst #komunikatKontakt = Dane poprawne — formularz wysłany.; zablokowany = nie
- Adres bez znaku @ blokuje wysyłkę — tekst #komunikatKontakt = Błąd: podaj poprawny e-mail.; zablokowany = tak
- 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.