JavaScript: Walidacja formularza cz. 1
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.
W tej lekcji wykonamy kolejny ciekawy projekt, a będzie nim walidator formularzy.
Mam tutaj przygotowany taki prosty formularz.
Widzisz jak on wygląda, imie i nazwisko.
Tutaj treść wiadomości, a tutaj mamy listę select, z której możemy coś wybrać.
Jeżeli wybierzemy np. pytanie, to nie możemy tutaj wrócić do Temat wiadomości. Jak to wygląda, zerknij
sobie w kodzie HTML.
Jest to tutaj. Wszystko wygląda normalnie, jeżeli chodzi ten select, to właśnie do tej opcji, temat wiadomości,
dodajemy sobie disabled, aby była ona wyłączona oraz selected, aby była domyślnie zaznaczona.
To będzie nam później przydatne, jeżeli ktoś niczego nie wybierze, to będziemy o tym wiedzieć, a jeżeli
wybierze coś innego, to nie pozwalamy już wrócić do tego co było wcześniej.
Natomiast, co jest istotne w tym formularzu to fakt, że po pierwsze mamy placeholder'y, przypisane do różnych
pól i jest to taki atrybut, który nam pozwala w HTML5 wyświetlić taką podpowiedź w tle. Nie ma jej
później, jeżeli odwołamy się do takiego pola i do value.
To co tutaj jest, nie zostanie nam zwrócone i następnie dodałem taki własny atrybut, data error.
I tutaj będzie treść komunikatu.
Jeżeli to pole nie zostanie uzupełnione poprawnie. Do tego później wrócimy, natomiast chciałbym, abyś wiedział, że
możemy dodawać sobie w HTML'u dowolne atrybuty, jakie nam się podobają i poprzez getAttribute, które ci już
pokazywałam, w tym kursie, możemy się do nich odwołać.
Natomiast są również atrybuty data, które są specyficzne. Jeżeli atrybut nazwiemy data pauza cokolwiek,
to będziemy przez specjalny obiekt,
dataset potem się do niego mogli odwołać i do tego jeszcze wrócimy.
Generalnie tak wygląda formularz w HTML'u, czyli do każdego pola, który chcemy, aby było wymagane dodajemy
data-error i treść komunikatu, który się pojawi, jeżeli tego pola nie uzupełnimy poprawnie.
Ok.
Przejdziemy od razu do kodu JavaScript.
Zauważ, że ja od razu pobrałem do zmiennej formularz oraz wszystkie pola, które mają atrybut data-error, czyli
za pomocą selektora CSS3,
możemy pobrać wszystkie pola, które mają taki atrybut.
Nie ma znaczenia jaką on ma wartość. Czyli na każdym polu, gdzie jest dany atrybut data-error to pole
zostanie tutaj uwzględnione.
Dla nas jest to świetne, dlatego że chcemy walidować tylko te pola, do których dodaliśmy data-error.
Jeżeli nie chcemy sprawdzać poprawności np. tego pola, to wystarczy, że usuniemy tutaj data-error.
Postanowiłem do tego podejść.
Oczywiście, jak zwykle, jest milion sposobów na to, jak stworzyć walidator formularzy,
a ja pokażę ci tylko jeden z nich, abyśmy formularz mogli walidować,
już wiesz, że musimy przypisać zdarzenie submit,
do tego formularza, które się wykona wtedy, kiedy przeglądarka będzie chciała go wysłać.
Więc odwołajmy się do form i może poprzez addEventListener,
dodamy sobie tutaj zdarzenie submit, już Ci to się pokazywałem.
Funkcję anonimową wpiszemy tutaj, odwołamy się tutaj do e.
Czyli event i następnie false przy capturing, no i w tej funkcji będziemy mogli na początek zapobiec
domyślnej akcji przeglądarki, co również już ci pokazywałam.
Dzięki temu, kiedy ktoś będzie chciał wysłać ten formularz, to jak widzisz strona się nie przeładowuje,
nic się nie dzieje, a bez tej linijki,
mogę ci to pokazać,
formularz zostałby wysłany i tutaj zostałby dołączony, czyli wszystkie dane zostałyby tam zapisane.
Teraz musimy je stąd usunąć.
Dobry początek już mamy, więc teraz będziemy te pola chcieli walidować.
W jaki sposób?
Otóż będziemy chcieli przeiterować przez wszystkie pola, które tutaj mamy, które oznaczyliśmy jako wymagane,
poprzez ten atrybut, czyli bardzo prosto to możemy zrobić.
Pętla for.
Już ten zapis wielokrotnie robiliśmy, więc go znasz.
Tutaj będziemy do każdego pola mogli się odwołać poprzez fields i po kolei będziemy mieli wszystkie te
pola, które zostały tutaj zapisane, a ważne jest jeszcze to, że metody querySelectorAll
ja jeszcze o tym, w tym kursie, nie wspomniałem.
One zbierają elementy w takiej kolejności, jak one występują w drzewie DOM.
Czyli jeżeli mówimy, znajdź wszystkie, które mają data-error poleci to po kolei.
Czyli pierwszy element, to będzie ten, drugi to będzie ten
itd.
Nie ma to większego znaczenia.
Możemy sobie po nich, bez problemu, przeiterować i wewnątrz pętli,
w ten sposób się do nich odwołać.
Teraz będę chciał zrobić jedną rzecz, poza tą pętlą. Mianowicie utworzyć zmienną errors. Będzie to
pusta tablica.
Dzięki temu, jeżeli tutaj będziemy walidować jakieś pole i będzie błąd, to wrzucimy go do tej tablicy
errors,
a na samym końcu będziemy mogli sprawdzić czy errors length jest większe niż 0.
Jeżeli nie będzie, bo w tym przypadku wiesz, że ta tablica, jeżeli odwołamy się do length to jest 0.
Czyli jest pusta.
Jeżeli length będzie większe niż 0, to znaczy że jakieś błędy tam się znajdują i nie pozwolimy wysłać formularza.
I teraz najciekawsze będzie się działo tutaj, aby nam to ładnie wyglądało, to może utwórzmy sobie zmienną, którą
nazwiemy field i do niej sobie przepiszemy to. co jest tutaj, abyśmy na tym field mogli operować i teraz
gdybyśmy zrobili console.log field, to będziemy mogli zobaczyć każdy z tych pól, po przejściu do konsoli
przeglądarki. Odświeżę raz jeszcze, wciskam wyślij i wszystkie te pola, które oznaczyliśmy jako data-error,
nam się wyświetlają.
Czyli póki co, jest wszystko OK.
I teraz pytanie, w jaki sposób będziemy chcieli poszczególne pola walidować.
Bo jeżeli mamy pole tekstowe, to chciałbym sprawdzić, po prostu, czy cokolwiek tam zostało wpisane.
Jeżeli mamy email, to chciałbym sprawdzić, czy tekst, który został wpisany zawiera małpę, a więc powiedzmy
czy jest to poprawny adres e-mail.
Jeżeli select, to chciałbym sprawdzić, czy jakaś wartość została tutaj wybrana.
Jeżeli textarea, to znowu będę chciał sprawdzić czy powiedzmy minimum trzy znaki zostały tutaj wpisane.
Czyli jak widzisz, będziemy potrzebowali różnych typów sprawdzeń.
No i teraz, jak możemy to zrobić?
Otóż wiesz, że za każdą iteracją pętli tutaj pod zmienną field mamy odwołanie do jednego z takich obiektów
i pokażę ci, że odwołując się do dowolnego z tych obiektów, na przykład klikając go tutaj i Inspect
Element, że w konsoli, bo już ci to pokazywałem, możemy się do niego odwołać poprzez dolar 0.
Możemy odwołać się do type i to nam zwróci
jego typ poprzez atrybut, czyli tutaj było to text, a jeżeli zrobię to samo na tym elemencie, który ma
type e-mail, zobaczmy, to zostanie zwrócone e-mail, więc możemy się tym posiłkować właśnie tutaj. Będę chciał
zrobić tutaj serię if'ów. Ja od razu wpiszę i za moment uzupełnimy je funkcjami, czyli if field.type równa
się tekst, to będziemy chcieli sprawdzić to pole pod tym względem, czy ma ono wartość większą niż 0 znaków
wpisanych.
Może zróbmy to w tym miejscu od razu, czyli będziemy chcieli sprawdzić if field.value, to już wiesz. Tutaj
zostanie zwrócony string, jeżeli coś zostanie wpisane, to będzie tam właśnie ten string, jeżeli nie to
będzie pusty.
Czyli, jeżeli jest to pusty ciąg znaków, a więc nic nie zostało wpisane to będziemy chcieli sobie dodać
może tutaj do errors, nowy błąd.
I teraz, co byśmy chcieli tutaj wrzucić, co nam się może przydać.
Otóż nie bez powodu przypisanym tutaj atrybuty data-error.
Dla tych pól, bo właśnie te stringi
będziemy chcieli sobie wrzucać do tablicy errors, aby później na stronie je wyświetlić.
Więc możemy odwołać się do field i następnie getAttributes dat-error
i to zostanie pobrane.
Ale wspomniałem na początku, że atrybuty, które zaczynają się od data pauza są specjalne i w HTML5 możemy
się do nich odwołać poprzez specjalny obiekt
dataset, więc zróbmy to teraz, możemy wpisać sobie tutaj field.
Następnie dataset i będzie to obiekt, w którym będą znajdować się wszystkie jakby wartości, które tutaj
podamy.
Czyli jeżeli napisaliśmy data pauza error, to w dataset będzie coś takiego jak error.
Jeżeli byśmy napisali data pauza name, to w tym dataset mielibyśmy tutaj name, czyli pod tym będziemy mieli
odwołanie do właśnie tejże wartości.
Oczywiście, tak jak wspomniałem, możesz użyć getAttribute, jeśli będzie ci bardziej intuicyjne.
Mamy tę wartość, więc wyrzućmy ją do errors, czyli errors.push, w ten sposób, właśnie ten error.
Na razie nie będę przechodził przez kolejne if'y, sprawdźmy sobie na samym końcu, po zakończeniu tej pętli, co
znajduje się w errors, czyli tutaj, ok i mamy tam Podaj Imię i Nazwisko. Jeszcze raz odświeżę.
Wpiszę tutaj cokolwiek, więc tutaj field value, to będzie to co wpisałem, nie będzie to pusty ciąg znaków, a
więc nic nam się nie doda, zobaczymy.
I tablica jest pusta.
O to nam właśnie chodziło.
Więc teraz możemy zrobić kolejny else if.
I jeżeli field type równa się email, to co ci przed momentem pokazałem, to będziemy chcieli tutaj sprawdzić
to wszystko inaczej. Mianowicie if, field.value.indexOf, małpka.
Również ci to pokazywałem już w tym kursie, że na stringu możemy się odwołać do indexOf i podać podstring,
czyli podciąg, który ma się w nim znaleźć, a więc jeżeli w tym, co ktoś wpisze tutaj w polu e-mail czyli np.
w takim stringu, nie znajdziemy małpki, to zostanie nam zwrócony minus 1.
Czyli jeżeli to się równa minus 1, to znaczy, że małpka tam się nie znalazła.
Oczywiście jeżeli ktoś pisze tak małpkę, to nadal nie jest poprawny adres e-mail,
ale dla naszego przykładu uznamy, że jest bo musielibyśmy tutaj zastosować coś, co nazywa się wyrażeniem
regularnym.
Ja to dobrze opisuje w drugiej części tego kursu.
Na razie w tym kursie jest to zbyt zaawansowane, więc uznamy, że jeżeli małpka się pojawiła, to jest to
poprawny adres e-mail.
Jeżeli się nie pojawi, to wiesz, że zostanie zwrócone
z tego zapisu minus jeden, więc możemy sprawdzić czy minus 1 jest równy minus 1.
Jeżeli tak, to będziemy chcieli do errors zrobić dokładnie to samo, czyli dodać to, co w tym polu jest
dataset.error.
W przypadku emaila to będzie
Podaj poprawny adres e-mail.
Możemy to oczywiście sprawdzić.
Odświeżam i nasza tablica ma już dwa komunikaty.
Podaj Imię i Nazwisko oraz podaj poprawny adres e-mail.
Teraz możemy przejść dalej i zastanówmy się jaki type będzie miała ta lista, bo tutaj odwołałem się do
text oraz e-mail. Sprawdźmy, jaki typ ma ta lista.
Inspect Element, mamy select, w konsoli pod dolar 0 się do tego odwołamy i to type. No i okazuje się, że type jest
to select-one. No i z tego powodu możemy znowu tutaj napisać
else if field.type równa się select-one.
Oczywiście musi to być w cudzysłowach.
To chcemy walidować listę, jak możemy sprawdzić, co się w niej znajduje.
Otóż ja pokazałem ci, że jeżeli ktoś nie wybierze żadnej wartości, czyli domyślnie będzie wybrana nasza
wartość
Temat wiadomości, tutaj.
To ja do niej przypisałem value, jako pusty ciąg znaków.
Czyli, jeżeli ktoś nie wybierze innego tematu, który będzie miał value pytanie propozycja lub support,
to będziemy mieli pusty ciąg znaków.
Czyli bez problemu możemy tutaj znowu sprawdzić, to samo co wyżej.
Zapiszmy to tutaj, czyli jeżeli value, to jest pusty ciąg znaków, to również chcemy taki błąd tam wstawić.
I znowu sprawdźmy.
Jak widzisz wybierz temat wiadomości, ale jeżeli wybiorę jakiś inny temat, to ten komunikat już się tutaj
nie pojawia.
Przejdźmy dalej.
Co my tam jeszcze mamy?
Mamy tutaj jeszcze textarea i tutaj będziemy chcieli sprawdzić czy minimum trzy znaki zostały wpisane.
Oczywiście, moglibyśmy sprawdzić czy minimum 1 został wpisany w dokładnie taki sam sposób, jak tutaj.
Natomiast teraz znowu sprawdzimy jaki typ ma textarea.
Jest to po prostu textarea.
Czyli znowu możemy sobie wszystko skopiować.
To co było tutaj.
Jeżeli type to textarea, to będziemy chcieli sprawdzić czy w field value.length, to co już ci pokazywałem,
na stringach możemy sprawdzać ich długość.
Tak samo jak tutaj porównujemy czy value to jest pusty ciąg znaków. Tak samo moglibyśmy porównywać czy
np. length
to nie jest zero. Wystarczyłoby tyle, bo jeżeli zostanie zwrócone 0, jest to wartość fałszywa.
I tutaj będziemy mieli false, ale tutaj sprawdzimy czy field.value.length jest większe lub równe 3, a więc
minimum 3 znaki chcemy, aby były wpisane.
No i teraz zobaczmy, mamy tutaj komunikat. W zasadzie to go nie mamy,
więc coś mogło pójść nie tak. Ja napisałem tutaj, że musimy mieć wartość większą lub równą 3 aby
był błąd.
Nie.
Jeżeli będzie mniejsza, może od trzech.
W ten sposób, to wtedy będzie błąd.
Czyli teraz, jeżeli nic nie wpisaliśmy, to ten komunikat powinien się tutaj pojawić, wpisz treść wiadomości.
Jeżeli wpisze dwa znaki, tutaj length, to będzie 2.
W tym miejscu, 2 jest mniejsze od 3, a więc nadal ten błąd się będzie pojawiał. Jeżeli wpisze 3 albo 4,
to on się już nie pojawia.
Ok.
W ten sposób nasza walidacja już działa.
Natomiast nie chcę, aby to wszystko było tutaj zapisane, tak jak to widzisz.
Więc będę chciał utworzyć do tego specjalne funkcje,
co zrobię w lekcji kolejnej.
Mam nadzieję, że piszesz razem ze mną. Jeżeli nie, to nadgoń sobie zaległości i w kolejnej lekcji dokończymy
sobie nasz walidator formularzy.
Kod
Walidacja formularza cz. 1 - HTML · 2 min
(function() {
var form = document.querySelector("#myForm"),
fields = form.querySelectorAll("[data-error]");
})();Walidacja formularza cz. 1 - CSS · 1 min
@charset "utf-8";
* {
padding: 0;
margin: 0;
}
body {
font: 14px/18px Tahoma, Arial, sans-serif;
}
.container {
width: 80%;
margin: 30px auto;
overflow: hidden;
}
h1 {
padding-bottom: 20px;
margin-bottom: 40px;
border-bottom: 1px #D8D8D8 solid;
line-height: 1;
font-weight: normal;
color: #666666;
}
ul.errors {
width: 600px;
padding: 20px;
margin-bottom: 30px;
background-color: #FFD4DE;
}
ul.errors li {
list-style: none;
line-height: 30px;
color: #F70053;
}
form {
width: 640px;
overflow: hidden;
}
form * {
box-sizing: border-box;
}
form input[type="text"],
form input[type="email"],
select,
textarea {
border: 1px #C5C5C5 solid;
background: #fff;
font: 14px/35px Tahoma, Arial, sans-serif;
color: #8A8A8A;
}
form input[type="text"].error,
form input[type="email"].error,
select.error,
textarea.error {
border-color: #FFA9C7;
}
form input[type="text"],
form input[type="email"] {
display: block;
width: 200px;
height: 35px;
padding: 0 15px;
margin: 0 20px 20px 0;
float: left;
}
form select {
width: 200px;
height: 35px;
padding: 0 15px;
border-radius: 0;
-webkit-appearance: none;
cursor: pointer;
}
form textarea {
clear: both;
display: block;
width: 100%;
height: 150px;
padding: 10px 15px 0 15px;
margin-bottom: 20px;
resize: none;
line-height: 22px;
}
form button[type='submit'] {
padding: 0 30px;
height: 40px;
float: right;
border: none;
background: #00C2F1;
cursor: pointer;
font: 14px/35px Tahoma, Arial, sans-serif;
color: #00566B;
}Walidacja formularza cz. 1 - finish · 3 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);
})();