JavaScript: Walidacja formularza cz. 2
od Podstaw
10 godz. 55 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Wstep do programowania oraz najwazniejsze konstrukcje jezyka
- Liczne “smaczki” zwiazane z kazda z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich trescia, atrybutami, stylami CSS
- Odczytywanie wspólrzednych polozenia elementu i jego wymiarów
- Obsluga zdarzen i debugowanie kodu
- Praktyczne projekty
- I wiele, wiele wiecej!
Witaj w kursie JavaScript od Podstaw!
Jeśli poznałeś już wymienione wyżej technologie, to zapewne zdajesz sobie sprawę z ich ograniczeń. Za pomocą języka HTML tworzymy bowiem strukturę dokumentu, dodajemy treść tekstową, obrazy czy wideo. Aby jednak strona internetowa wyglądała perfekcyjnie, korzystamy z arkuszy stylów CSS, które pozwalają nam opisać wygląd wszystkich elementów HTML, ustawić wielkość tekstu czy dodać tło strony. No właśnie, ale gdzie tutaj interakcyjność?Zapewne już wiesz, że język CSS oferuje tzw. pseudoklasy, które pozwalają nam np. przypisać zmianę koloru elementu po najechaniu na niego kursorem myszy. I to tak naprawdę wszystko, na co możemy zareagować. A co gdybyśmy chcieli po wciśnięciu jakiegoś przycisku wysunąć ukryty panel, sprawdzić poprawność wypełnianego właśnie formularza lub pobrać dane z serwera i wyświetlić je na stronie bez przeładowywania witryny? Dobra wiadomość jest taka, że to wszystko jest możliwe z użyciem języka JavaScript, który “rozumie” każda przeglądarka internetowa.Choć język JavaScript powstał jako język skryptowy na potrzeby stron internetowych, to już dawno temu “wyszedł” z przeglądarek internetowych i może być używany tak naprawdę gdziekolwiek. W kursie, który masz przed sobą, poznasz język JavaScript jako niezależny język programowania, a dopiero później dowiesz się, jak wykorzystywać go do wzbogacania stron internetowych. Dzięki postawieniu grubej linii pomiędzy samym językiem, a Obiektowym Modelem Dokumentu dostępnym w przeglądarkach internetowych, będziesz nie tylko bardzo dobrze rozumiał sam język, ale w przyszłości wykorzystasz go do innych zastosowań.Na początku omówimy ciekawą historię języka JavaScript, a chwilę później rozpoczniemy poznawanie najważniejszych jego konstrukcji. I tak dowiesz się czym są zmienne, jakie typy danych dostępne są w tym języku, czym są liczne operatory, instrukcje warunkowe, pętle, tablice, obiekty i funkcje. Wszystkie te zagadnienia są bardzo podobne w innych językach programowania, dlatego kurs ten jest również świetnym wstępem do programowania w ogóle. Każda z przedstawianych konstrukcji języka jest bardzo dokładnie tłumaczona z myślą osobach początkujących. Nie zmienia to jednak faktu, że nawet osoby znające już podstawy języka JavaScript znajdą tutaj coś dla siebie, gdyż na każdym etapie przedstawiane są również liczne ciekawostki odnośnie danej konstrukcji.Kiedy zrozumiesz już jak działa język JavaScript, przejdziemy do drugiej połowy kursu, gdzie dokładnie omówimy Obiektowy Model Dokumentu, dostępny w przeglądarkach internetowych. Zobaczysz jak przeglądarka tworzy z kodu HTML drzewo dokumentu, jak reprezentowane są poszczególne jego węzły, a także jak język JavaScript potrafi z tym “wewnętrznym światem” współpracować. Dowiesz się jak wyszukiwać na stronie interesujących nas elementów HTML, a także jak tworzyć nowe elementy, przypisywać im treść i wstawiać je na stronę. Popracujemy również z atrybutami elementów, ich klasami i wreszcie ze stylami CSS, abyśmy mogli wpływać dynamicznie na wygląd naszej strony.Zobaczysz również, jak możemy w dowolnym momencie odczytać współrzędne położenia elementu na stronie, a także jego wysokość czy szerokość. Tę wiedzę wykorzystamy później w praktycznym przykładzie.Jeden z rozdziałów kursu poświęcony został zdarzeniom, a więc możliwości reagowania na zachowania użytkownika. Dzięki temu zobaczysz, jak możemy przypisać np. zdarzenie kliknięcia do wybranego elementu, a kiedy zostanie on kliknięty, wykona się przygotowany przez nas kod. Poznasz kilka różnych sposobów na przypisywanie oraz usuwanie zdarzeń, a także dowiesz się czym jest tzw. “bubbling” oraz “capturing” czy jak zablokować domyślną akcję przeglądarki.Przy pisaniu jakiegokolwiek kodu, zawsze pojawiają się błędy, dlatego i tutaj Twoje wątpliwości nie pozostaną bez odpowiedzi. Poznasz wszystkie typu błędów, które mogą się pojawić podczas wykonywania naszego kodu, a także wiele sposobów ich wykrycia i wyeliminowania.W kursie nie brakuje oczywiście praktycznych przykładów, które celowo zostały ułożone tak, aby wykorzystać w nich jak najwięcej zdobytej wcześniej wiedzy. Nie zostaniesz więc sam z poczuciem, że co prawda rozumiesz jak działa dana konstrukcja, ale nie masz pomysłu, kiedy z niej skorzystać. Na początek wykonamy praktyczny projekt losowania liczb z wybranego przedziału tak, aby nie mogły się powtórzyć. Już przy tym projekcie poznasz wiele ciekawych technik i sztuczek.Następnie przejdziemy do nieco bardziej zaawansowanego przykładu i napiszemy skrypt, który pozwoli nam sortować dane w tabeli po wybranych kolumnach, kiedy któraś z nich zostanie kliknięta. Zobaczysz jak sortować dane zarówno malejąco jak i rosnąco, a także jak zmieniać kolejność elementów HTML na stronie.W kolejnym projekcie zajmiemy się walidacją danych wpisywanych do formularza, by ten nie mógł zostać wysłany do serwera tak długo, jak zawiera jakiekolwiek błędy. Zobaczysz tutaj zdarzenia związane z polami formularza, a także sposoby na pobieranie z nich wartości i sprawdzanie czy są one poprawne. Zadbamy także o wrażenia użytkownika i wyświetlimy na stronie stosowne błędy, a także podświetlimy źle uzupełnione pola na czerwono.W przedostatnim projekcie wstawimy na stronę przycisk, który będzie się pojawiał po przewinięciu strony w dół, a znikał po odwrotnej akcji. Co jednak ciekawe, po jego kliknięciu, strona zostanie automatycznie, płynnie przewinięta do samej góry.W ostatnim projekcie stworzymy bardzo efektowny dymek z podpowiedzią, który będzie się pojawiał nad elementem po najechaniu na niego kursorem myszy. Wykorzystamy tutaj mnóstwo ciekawych technik. Dowiesz się również jak swój kod przygotować w taki sposób, abyś mógł go udostępnić innym osobom, by w łatwy sposób skorzystały z przygotowanego Tooltipa na swoich stronach.Kurs kończy się sekcją Tips & Tricks, w której znajdziesz 10 krótkich lekcji. W każdej z nich została omówiona jedna sztuczka. Każda z nich pozwoli Ci jeszcze lepiej zrozumieć język JavaScript, ale przede wszystkim zaoszczędzić czas i kilka linijek często niepotrzebnego kodu.Podsumowując, kurs ten jest nie tylko wprowadzeniem do samego języka JavaScript, ale także do Obiektowego Modelu Dokumentu. Dzięki wyraźnemu rozdzieleniu tych dwóch zagadnień, będziesz mógł w przyszłości wykorzystać język JavaScript także do innych zastosowań, poza przeglądarką internetową.
Kurs JavaScript od Podstaw to między innymi:
- Wstęp do programowania
- Najważniejsze konstrukcje języka
- Liczne “smaczki” związane z każdą z konstrukcji
- Obiektowy Model Dokumentu i DOM API
- Wyszukiwanie elementów na stronie
- Tworzenie nowych, praca z ich treścią, atrybutami, stylami CSS
- Odczytywanie współrzędnych położenia elementu i jego wymiarów
- Obsługa zdarzeń
- Debugowanie kodu
- Praktyczne projekty
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które znają już podstawy HTML i CSS i chciałyby przejść poziom wyżej i dodać do swoich stron dynamiczności. Żadna wcześniejsza wiedza z zakresu JavaScript czy programowania nie jest wymagana, gdyż wszystkie konstrukcje są starannie tłumaczone. Materiał ten będzie również świetnym odświeżeniem i usystematyzowaniem wiedzy dla osób, które już z tym językiem miały do czynienia. Po przerobieniu tego kursu będziesz gotowy, by poznawać język JavaScript dalej, z kursem JavaScript w Praktyce, który powstał jako dopełnienie tego kursu i porusza nieco bardziej zaawansowane tematy, na które tutaj zabrakło już czasu.
Kontynuujemy pracę nad naszym walidatorem formularzy.
Mam nadzieję, że jesteś ze mną na bieżąco i teraz wspomniałem, że będziemy chcieli, aby te które tutaj
się znajdują, wyrzucić do osobnych funkcji, po to, aby się nie powtarzać, bo np. tutaj powtórzyliśmy dokładnie
to samo co tutaj.
Jest to całkowicie bez sensu.
Po to istnieją funkcje, aby kodu nie powtarzać.
Teraz na górze będę chciał stworzyć kilka funkcji i pierwszą z nich
nazwę isNotEmpty.
W ten sposób, czyli ono nam będzie mówić true lub false.
Czy coś jest puste, czy nie jest.
I tutaj będę chciał przekazywać pole, czyli field.
W ten oto sposób i teraz, co się tam będzie działo.
Otóż tuta,j gdzie chcieliśmy sprawdzić, czy pole nie jest puste.
Robiliśmy to w ten oto sposób, więc dokładnie to samo będę chciał stąd wyciąć.
Natomiast, tutaj utworzymy zmienną, którą nazwiemy isValid,
czyli czy formularz jest poprawny.
Założymy, że nie jest.
Czyli napiszemy tutaj false, a tutaj będziemy chcieli napisać isValid równa się isNotEmpty
i przekażemy referencje do tego pola.
Mam nadzieję, że łapiesz o co chodzi.
Wywołujemy funkcję isNotEmpty i przekazujemy jej pole.
Więc w tej funkcji będziemy to pole mieli tutaj i w tej funkcji możemy sprawdzić, czy to pole puste nie
jest.
Po prostu zwracając true lub false.
Tutaj to errors nie jest nam potrzebne, do tego jeszcze wrócimy, więc wystarczy zauważ, że tutaj napiszemy
return field.value równa się pusty ciąg znaków.
Mam nadzieję, że już wiesz, że ta konstrukcja zwróci nam true lub false.
Jeżeli field, czyli pole, które tutaj przekazaliśmy
i jego value jest równe pustemu ciągowi znaków, to tutaj zostanie zwrócone true, w przeciwnym wypadku false,
czyli to zostanie zapisane w tym miejscu.
Ten warunek jednak chcemy sobie odwrócić.
Tzn.
Jeżeli do tej funkcji przekażemy pole, w którym mamy wpisane jakieś znaki, to tutaj chcemy zwrócić true,
dlatego, że funkcja nazywa się isNotEmpty, czyli czy nie jest pusty.
Jeżeli tutaj będą jakieś znaki np. asdf,
nie jest to równe pustemu ciągowi znaków, więc zwracamy true.
I w tym momencie zmienna, którą utworzyliśmy nazywa się false.
Zauważ, że ona jest w pętli, więc ona dotyczy tylko tego naszego jedynego pola.
Zmień wartość na true.
Te inne warunki, powiedzmy, że w tym miejscu się nie wykonają, bo nasze pole było o typie text.
Czyli to pierwsze nasze pole, więc inne if'y się nie wykonają.
Przejdźmy zatem niżej, gdzie te if'y się kończą i będziemy chcieli sobie sprawdzić, czy isValid ma wartość false
czy też nie.
W ten sposób, if not isValid.
Czyli jeżeli tutaj nadal jest false, na początku przy pisaliśmy false. Potem wywołaliśmy sobie
funkcja is not Empty.
Jeżeli ona nam zwróci false, no to tutaj będzie wartość false i możemy tutaj sprawdzić, czy jeżeli tutaj jest
false, to wtedy do errors będziemy chcieli od tego pola dodać komunikat, tak jak to robiliśmy wcześniej.
OK i ten komunikat tam zostanie zapisany.
Będę chciał zrobić podobnie tutaj w innych miejscach, gdzie sprawdzaliśmy dokładnie to samo, więc tutaj
znowu wpiszemy sobie taki sam kod, przekazując to pole.
W przypadku select-one w przypadku textarea zastosujemy inną funkcję, bo ona musi mieć tutaj przynajmniej
trzy znaki albo przynajmniej dwa znaki, więc utworzymy sobie kolejną funkcję. Nazwę ja atLeast,
czyli przynajmniej. Będziemy przekazywać pole oraz ilość znaków, które tam muszą być, czyli powiedzmy minimum.
I z tej funkcji będziemy po prostu zwracać field.value
jest większe lub równe minimum, czyli jeżeli teraz wywołamy sobie taką funkcję i przekażemy jej pole to
możemy przekazać ile ma być minimum znaków w takim polu i możemy to zrobić w tym miejscu, napiszemy
isValid, tak jak wcześniej.
I zamiast isNotEmpty, napiszemy atLeast.
Może nazwijmy ją sobie isAtLeast, będzie to lepiej brzmieć
I tutaj przekażemy field, ale także przekażemy
2.
Czyli tak jak wcześniej, ta funkcja nam zwróci true lub false.
Jeżeli tam będzie więcej niż te dwa znaki, które tutaj przekazaliśmy, OK i ostatnią funkcję, którą chcę
tutaj zrobić będzie się nazywała isEmail
i ta funkcja będzie nam tylko sprawdzać to, co przed momentem mieliśmy. Przekazujemy pole.
I ona zwraca 3, wartość tego pola, a więc field.value.indexOf małpka nie jest równe
minus 1. Jeżeli jest równe minus 1, to małpki tam nie ma.
Więc ten sposób to robimy.
I pamiętaj, że to zostanie tutaj przeliczone i z tego zostanie zwrócony true lub false.
Właśnie przez ten operator i to zostanie dalej przekazany do return i zwrócone w to miejsce.
Mam nadzieję, że na razie za mną nadążasz i teraz przejdziemy tutaj niżej.
I znowu wyświetlamy te błędy, więc sprawdźmy, jak widzisz wszystko działa poprawnie.
Jeżeli tutaj wpisze przynajmniej dwa znaki.
A w zasadzie trzy, to ostatniego komunikatu już być nie powinno.
Czyli coś nam do końca nie zadziałało.
W przypadku naszej funkcji isAtLeast.
Przejdźmy do tej funkcji.
Jak widzisz, tutaj taką funkcję wywołaliśmy, mamy gdzieś jakiś problem, przekazaliśmy jej pole i wartość
min 2.
min 2.
Czyli w tej funkcji sprawdzamy, czy wartość tego pola ma więcej niż te dwa znaki.
Już widzę gdzie jest błąd.
Tutaj zabrakło length.
Czyli na tym stringu, który z value jest zwracany, to zawsze jest string, wywołujemy sobie length, bo w JavaScript'cie na stringach
właśnie możemy do length się odwołać i teraz nam to powinno zadziałać, OK.
Czyli teraz będziemy mieli taki błąd na końcu.
A jeżeli wpisze 3 znaki, to już tego błędu nie ma.
Super.
I teraz jest jeszcze jedna rzecz, którą chcę zrobić.
Mianowicie przygotowałem sobie wcześniej specjalną klasę, którą nazwałem error, więc jeżeli do dowolnego
pola dodam klasę error, zrobimy to na końcu.
W CSS to pole będzie zaznaczone na kolor czerwony.
Czyli tutaj.
Jeżeli isValid ma wartość false, czyli to pole było nieprawidłowe to będziemy chcieli oprócz tego,
że bierzemy jego komunikat i wrzucamy do tablicy errors.
Oprócz tego będziemy chcieli mu dodać odpowiednią klasę, a więc field.classList,add error. Dodajemy mu klasę
error i zobaczmy jak to będzie wyglądać i jak widzisz wszystkie te pola teraz otrzymały taką właśnie
klasę.
W przeciwnym wypadku będziemy chcieli taką klasę usunąć.
Posługujemy się tutaj classListRemove, czyli teraz raz jeszcze odświeżam, mamy błąd, ale jeżeli coś pisze
i wcisnę wyślij, to tak klasa została usunięta, bo ten warunek nie jest już dłużej spełniony.
I ostatnia rzecz jaką chciałbym zrobić, to wyświetlanie błędów.
No bo skoro mamy tutaj tablicę, w której są wszystkie te błędy, to chciałbym zamienić je na elementy li
i wstawić gdzieś na stronę, wyświetlić jako błędy.
Przejdźmy sobie tutaj.
Zerknijmy czy coś wcześniej zostało przygotowane.
Nie, natomiast mogę ci powiedzieć, że będziemy tutaj na stronę chcieli wstawić odpowiedni właśnie element
ul,
z tymi błędami i teraz go sobie przygotujemy.
Jak w ogóle możemy sprawdzić czy błędy się pojawiły.
Otóż mamy tutaj tablice errors, do której wrzucaliśmy te komunikaty i teraz poza tą pętlą for możemy sprawdzić
czy tablica errors length jest więcej niż 0.
Jeżeli będzie to 0, tak jak wspominałem wartość fałszywa, to się nie wykona.
Czyli jeżeli to będzie 1 albo jakaś inna wartość, jeżeli będzie chociaż jeden błąd, bo chcemy wywołać
funkcję displayErrors z którą za moment stworzymy i przekażemy jej właśnie tę tablicę.
Natomiast w przeciwnym wypadku chciałbym się odwołać do form
kropka submit.
I co ciekawe, o tym jeszcze nie mówiłem.
My na początku zatrzymaliśmy domyślną akcję przeglądarki, a więc formularz nie został wysłany.
Sprawdziliśmy jego poprawność i co teraz.
Wszystko jest poprawne, ale jak ten formularz wysłać.
Otóż możemy się odwołać do niego i do specjalnej metody submit, która go po prostu wyśle,
jeżeli błędów nie będzie, teraz sobie stwórzmy funkcję displayErrors, która nam je wyświetli i możemy ją zrobić
w tym miejscu.
Mamy ją tutaj i wspomniałem ci, że wszystkie błędy będziemy chcieli zamienić na elementy li, które będziemy
musieli wstawić do elementu ul, ale, że taki element na stronie nigdzie nie istnieje, to będziemy chcieli
go utworzyć Jeżeli go nie ma.
I teraz, jak możemy to sprawdzić.
Stworzymy zmienną ul i odwołamy się do document.querySelector ul kropka errors, czyli chcę znaleźć element
ul z klasą errors.
Jak ci już mówiłem Overy querySelector, jeżeli nie znajdzie takiego elementu, zwróci nam null,
czyli możemy teraz sprawdzić czy na stronie taki element istnieje.
If not ul, jeżeli tutaj będzie null, to znaczy, że ten element nie istnieje, to będziemy go mogli utworzyć,
czyli zmienną ul utworzoną wyżej, która będzie przechowywać wartość null nadpisujemy i tworzymy
poprzez document.createElement, nowy element ul.
Dlaczego tak robimy?
Otóż dlatego, że kiedy wstawimy go na stronę i znowu wołamy funkcję displayErrors, to będziemy go na stronie
szukać i on zostanie tam znaleziony, a więc nie będziemy go tworzyć od nowa, czyli tylko raz sobie utworzymy
taki nowy element.
Od razu chcę do niego dodać klasę errors.
Tak jak tutaj to zdefiniowałem, również w CSS'ie odpowiednio to będzie ostylowane, czyli do ul, a więc
do nowo utworzonego elementu, którego jeszcze nie ma na stronie.
Możemy się odwołać poprzez classList. Następnie add i dodać mu klasę errors, w ten sposób. No i pod spodem, w tym
miejscu dla naszego kodu, już nie ma znaczenia czy element ul istniał czy go utworzyliśmy. W zmiennej
ul mamy nowy element ul, na którym możemy pracować.
Będę chciał teraz zresetować jego HTML albo może zrobimy to później, abyś dokładnie zobaczył, o co chodzi.
Natomiast będę chciał na tablicy errors, która została do nas przekazana,
w tym miejscu tutaj, będę chciał przeiterować i dla każdego jej elementu, takiego jak tutaj widzisz, utworzyć
element li.
Zrobimy to szybko, czyli w tym miejscu poprzez errors forEach skoro jest to tablica to ma taką metodę
i tutaj będziemy mieli jeden pojedynczy
element, czyli będzie to string, który przed momentem widziałeś w przeglądarce. Utworzymy element li, odwołamy
się do jego textContent i będziemy chcieli przypisać error, czyli to co zostanie z tej tablicy przekazane
i następnie wstawimy go do ul.
Robię to w ten sposób.
Nie robię tutaj nowego fragmentu dokumentu, bo jeżeli ul mamy tutaj na zapleczu można powiedzieć, jeszcze nie
jest na stronie, to nie ma większego problemu z tym, że te elementy są tam dodawane. Jeżeli ono będzie
na stronie, to fakt one, będą do niego dopisywane
cały czas i na stronie renderowane, ale w tym przypadku nie ma to już aż takiego dużego znaczenia.
OK i to powinno nam zadziałać.
Jak widzisz, jeżeli były błędy, raz jeszcze to prześledźmy, to chcemy wywołać funkcję displayErrors i przekazać
jej tablicę z błędami, która jest tutaj.
Przejdźmy sobie tutaj i zobaczmy.
Po tej tablicy będziemy iterować dla każdego elementu utworzymy li z komunikatem o błędzie i wstawimy
to do ul i na samym końcu do ul musimy jeszcze wstawić na stronę.
I chciałbym to zrobić przed formularzem, czyli w tym oto miejscu, pomiędzy h1. Skorzystamy z jednej
z metod, która już w tym kursie ci pokazywałem, czyli insertBefore i bez problemu sobie to wstawimy.
Odwołamy się tutaj do form, czyli do zmiennej, która jest na samej górze, bo do niego chcemy to wstawić,
czyli do tego formularza i następnie do jego parentNode, czyli do div'a. Dlaczego w ten sposób? No, bo
w końcu to do tego div'a chcemy to umieszczać, a nie zapisałem go nigdzie w zmiennej, więc formParent
Node, to jego rodzic, czyli ten oto div i chcemy do tego div'a wstawić poprzez insertBefore.
Jeśli nie pamiętasz tej metody, to wróć do odpowiedniej lekcji.
Co chcemy wstawić, otóż ul.
Wstawić przed formularzem, czyli do tego elementu chcemy wstawić ul,
przed elementem form, czyli w to oto miejsce. Odświeżmy i zobaczmy i wow wszystko działa poprawnie.
Co się jednak stanie, jeżeli teraz uzupełnie pewne pola.
Jak widzisz, w konsoli nie mamy już tego błędu, ale tutaj jest on ciągle wyświetlany. No i z tego właśnie
powodu tutaj wcześniej zacząłem odwoływać się do resetowania wszystkiego, co jest w elemencie ul.
Ale zrobimy to dopiero teraz, czyli ul.innerHTML zresetujemy w ten sposób, a więc wszystko co jest w takim
elemencie ul.
Jeżeli tutaj się już on na stronie znajduje. Poprzez querySelector został znaleziony, to się nie wykona.
Mamy tutaj referencje do tego elementu, chcę wszystko w nim wyczyścić, a więc wszystkie elementy li i znikną
i następnie od nowa je tutaj dodamy.
Teraz powinno zadziałać.
Zobaczymy.
I teraz jeżeli coś wpisze czyli to pole jest uzupełnione poprawnie, to wyczyściliśmy cały ul i od nowa
tutaj wpisaliśmy wszystkie li, jeżeli podam e-mail i będziemy mieli tu jakąś małpkę, to również nie
powinno być tego komunikatu,
jak widzisz wszystko działa.
Wybierzmy jeszcze jakiś temat i został tylko jeden błąd, wpisz treść wiadomości.
Jeżeli wpiszemy kilka znaków, to nie będzie błędów i
form submit,
czyli, to co mamy tutaj gdzieś na samym dole, powinno się wykonać,
Zobaczymy.
I jak widzisz, formularz został wysłany.
Strona została przeładowana, a to wszystko zostało zapisane, w tym miejscu, w ciągu znaków, w adresie URL.
No i to by było tyle, jeżeli chodzi o walidację formularza.
Dosyć długie dwie lekcje, mam nadzieję jednak, że wiele się z nich nauczyłeś i podejście do walidacji formularza
może być oczywiście inne, możesz w inny sposób sobie to wymyślić.
Natomiast myślę, że to również dla początkującego nie jest najgorsze.
Kod
Walidacja formularza cz. 2 - finish · 1 min
(function() {
var form = document.querySelector("#myForm"),
fields = form.querySelectorAll("[data-error]");
function isNotEmpty(field) {
return field.value !== "";
}
function isAtLeast(field, min) {
return field.value.length >= min;
}
function isEmail(field) {
return field.value.indexOf("@") !== -1;
}
function displayErrors(errors) {
var ul = document.querySelector("ul.errors");
if(!ul) {
ul = document.createElement("ul");
ul.classList.add("errors");
}
ul.innerHTML = "";
errors.forEach(function(error) {
var li = document.createElement("li");
li.textContent = error;
ul.appendChild(li);
});
form.parentNode.insertBefore(ul, form);
}
form.addEventListener("submit", function(e) {
e.preventDefault();
var errors = [];
for(var i = 0; i < fields.length; i++) {
var field = fields[i],
isValid = false;
if(field.type === "text") {
isValid = isNotEmpty(field);
} else if(field.type === "email") {
isValid = isEmail(field);
} else if(field.type === "select-one") {
isValid = isNotEmpty(field);
} else if(field.type === "textarea") {
isValid = isAtLeast(field, 2);
}
if(!isValid) {
field.classList.add("error");
errors.push(field.dataset.error);
} else {
field.classList.remove("error");
}
}
if(errors.length) {
displayErrors(errors);
} else {
form.submit();
}
console.log(errors);
}, false);
})();Walidacja formularza cz. 2 - start · 1 min
(function() {
var form = document.querySelector("#myForm"),
fields = form.querySelectorAll("[data-error]");
form.addEventListener("submit", function(e) {
e.preventDefault();
var errors = [];
for(var i = 0; i < fields.length; i++) {
var field = fields[i];
if(field.type === "text") {
if(field.value === "") {
errors.push(field.dataset.error);
}
} else if(field.type === "email") {
if(field.value.indexOf("@") === -1) {
errors.push(field.dataset.error);
}
} else if(field.type === "select-one") {
if(field.value === "") {
errors.push(field.dataset.error);
}
} else if(field.type === "textarea") {
if(field.value.length < 3) {
errors.push(field.dataset.error);
}
}
}
console.log(errors);
}, false);
})();