Kompleksowa walidacja formularza rejestracji
Treść zadania
W kompletnym formularzu rejestracyjnym mamy:
<form id="formRejestracja">
<input id="fLogin" value="anna">
<input id="fEmail" value="anna@szkola.pl">
<input type="password" id="fPass1" value="tajne123">
<input type="password" id="fPass2" value="tajne123">
<input type="checkbox" id="fZgoda" checked>
<button type="submit" id="btnRejestruj">Zarejestruj konto</button>
</form>
<p id="komunikatFormularza"></p>Na zdarzeniu submit formularza:
- Zablokuj domyślną akcję przez
event.preventDefault(). - Sprawdź po kolei: login nie może być pusty, e-mail musi zawierać
@,hasło musi mieć min. 8 znaków, oba hasła muszą być identyczne, a checkbox zgody musi być zaznaczony. - Jeżeli wystąpi błąd — wypisz odpowiedni komunikat i przerwij funkcję przez
return;. - Jeżeli wszystkie warunki są spełnione — wpisz:
Konto zostało pomyślnie utworzone!.
Co będzie oceniane
- Zablokowanie przeładowania przez preventDefault().
- Sprawdzenie wszystkich 5 kryteriów walidacji.
- Wpisanie komunikatu Konto zostało pomyślnie utworzone! dla poprawnych danych.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Pomyślna rejestracja po spełnieniu wszystkich kryteriów — tekst #komunikatFormularza = Konto zostało pomyślnie utworzone!
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Zbuduj pełną walidację formularza na zdarzeniu submit
Wskazówki
Wskazówka 1
Zarejestruj zdarzenie submit na formularzu i wywołaj event.preventDefault() na początku funkcji.
Wskazówka 2
Zastosuj sekwencję sprawdzeń z wczesnym wyjściem return; przy błędach, a komunikat sukcesu umieść na końcu.