Walidacja formularza html za pomocą JS

0

Witam,

mam zadanie do wykonania, w którym jestem ograniczony do html, css i javascriptu (czystego). Zadanie polega na walidacji formularza. Większą część kodu mam. Mam natomiast dwa problemy i byłbym wdzięczny za pomoc.

  1. Formularz składa się z kilku pól (zawartość nieistotna). Zrobiłem już walidacje wywoływaną wciśnięciem przycisku:
    Po wciśnięciu przycisku jest wywoływana funkcja, która potem wywołuje funkcje do walidacji każdego pola. Przykład poniżej
function passwordValidation(password, alertList) {
    if (password.value.length === 0) {
        alertMsg = "Uzupełnij pole Hasło";
        alertList.push(alertMsg);
        
    }
}

Teraz mój pierwszy problem jest taki, że:
umieszczam komunikaty z błędami w tablicy,a potem chciałbym tą listę wyświetlić nad lub pod formularzem. Po pierwsze nie wiem, czy to jest dobre rozwiązanie? Czy lepiej w każdej funkcji bezpośrednio manipulować DOMem? Jeśli moje rozwiązanie jest dobre, to jak to najlepiej wyświetlić?

2 Oprócz walidacji opisanej powyżej, chciałbym skorzystać z blur, czyli jeśli kliknę na pole, ale zostawię je puste, albo niepoprawnie wypełnione i kliknę gdzie indziej to tło zrobi się czerwone. I tu mam bardziej problem koncepcyjny, czy da się to połączyć z walidacją, którą wykonałem powyżej, czy pod to muszę napisać nowe funkcje?

Oba pytania są trochę bardziej pod kątem jak to zrobić poprawnie, a nie jak to zrobić w ogóle.

Z góry dzięki za odpowiedzi.

Pozdrawiam

0

Po pierwsze 99% validowania formularza można zrobić w czystym html, nie używając nawet jednej linijki jsa, np atrybut required, gdy wciśniesz wysłanie formularza to wyświetli się dymek z informacją, że pole nie jest wypełnione. Dopiero gdy przejdzie validacje wbudowaną to takiego submita przechwytujesz w zdarzeniu on-submit w <form> i wywołujesz metodę która zrobi pozostałą validację, której nie powinno być wiele bo pewnie jedynie sprawdzenie czy passwordy są takie same. Patterny też można zrobić w czystym htmlu więc sprawdzisz czy hasło jest takie jak być powinno.

0

Wymóg jest aby walidacja była w javascript.

1 użytkowników online, w tym zalogowanych: 0, gości: 1