Nowoczesny React: Walidacja danych formularza

0:00Jeśli chodzi o walidację.

0:01Najpierw spojrzymy na to z wizualnej strony, czyli w bulmie.

0:04Tutaj pod form Ctrl + w General Form mamy taki podgląd i to właśnie będzie input,

0:09który da nam informację is dangerous jako help, czyli ten tekst, który mamy tutaj,

0:14to będzie nasz error i będzie podświetlony tak na czerwono.

0:17Dzięki temu, że zastosujemy klasę is Dangerous w takim wypadku tutaj powinniśmy

0:23dopisać sobie to pole, gdzie będziemy obsługiwać errory i tutaj będziemy

0:28dodawać klasę is danger do inputa.

0:31Wtedy będzie to wyglądało właśnie w ten sposób.

0:33Tutaj oczywiście będziemy mieli odpowiedni message, który będzie

0:37bezpośrednio z walidacji.

0:39Jeśli chodzi o walidację formikato tutaj mamy całą masę sposobów walidowania do

0:44wyboru przede wszystkim form level validation field, level, validation

0:48manual i triggering validation.

0:50Czyli generalnie mamy możliwość uruchamiania tego na różne

0:54sposoby i walidowania formularzy.

0:56My zastosujemy ten pierwszy, czyli level Validation.

1:00Tutaj będzie nam zależało na tym, żeby dostarczyć funkcję validatei.

1:04Ta funkcja validate zwróci nam values i na podstawie tych values

1:08określi czy są błędy czy nie?

1:10Czyli w values będziemy mieli nasze personname.

1:12I utworzymy sobie specjalny obiekt errors.

1:15Jeżeli on pozostanie pusty to dla foremka jest to informacja, że nie mamy błędów.

1:19Jeżeli natomiast coś dopiszemy do tego obiektu, no to oznacza,

1:22że coś jest nie tak.

1:24Możemy to sobie wyobrazić w ten sposób, że mamy funkcję validator i dostajemy values.

1:30I teraz tutaj pożyczymy sobie ten obiekt errors i od razu go zwrócimy.

1:36Teraz sprawdzamy.

1:38Jeżeli values nie ma naszego personname to dodajemy error zgodny z tym polem,

1:45czyli errors personName name is required.

1:48I druga sprawa to chcemy zwalidować.

1:51Jeżeli jest value personname to chcemy zobaczyć jaką ma długość, żeby zobaczyć

1:58czy ta długość to minimum dwa znaki.

2:03I teraz validate możemy przesłać tutaj i zobaczyć jak to będzie działało w

2:09kontekście naszych danych i tego jak chcemy to zwalidować na

2:14konkretnym polu tutaj w Formiq.

2:17Dobrze by było po prostu tutaj użyć form props values personname.

2:22Tylko, że to będą teraz errors dla person name.

2:26I możemy mieć renderowanie warunkowe.

2:29Czyli jeżeli mamy błąd to wtedy chcemy go wyświetlić.

2:34Spróbujmy sobie to odświeżyć.

2:36I teraz Danger jest na stałe przyczepione, dlatego to jest problem.

2:40Zamiast tego powinniśmy użyć ClassName.

2:42Czyli ten className, który tutaj potrzebujemy.

2:44To oczywiście będzie wykorzystanie tej biblioteki z klas name.

2:50I do klas name dodajemy tutaj input.

2:53Natomiast w obiekcie będzie z Danger.

2:56I tutaj Formers Person name będzie determinowało czy mamy jakieś

3:01errory w person name czy nie.

3:04I tutaj jeszcze importujemy sobie className z ClassName.

3:08Teraz odświeżmy to wszystko i zobaczmy, że w momencie, w którym jeszcze nie

3:11odwiedziliśmy formularza to wszystko jest w porządku.

3:14W momencie, w którym go odwiedzimy.

3:17I zrobimy to w ten sposób.

3:19To zobaczmy, że formularz ma błędy.

3:22Czyli wtedy widzimy, że formularz zawiera błędy i podświetla nam się na czerwono.

3:27Zauważmy jeszcze, że w momencie, w którym forma jest pusta, nasze

3:30opacity świeci się na 1.

3:33Tutaj jeszcze poprawmy sobie ten warunek, ponieważ powinno być jeżeli land jest

3:37mniejszy lub równe 2, więc wtedy dopiero będzie to problem.

3:42Więc jeżeli mamy powyżej dwóch znaków, wszystko jest ok.

3:45Natomiast początkowo forma wyświetla się jako valid.

3:49Dlaczego?

3:50Dlatego, że formularz nie zostanie zrealizowany aż do momentu, w

3:54którym nie zostanie dotknięty.

3:56Czyli nie ma tak zwanego dirty state.

3:59W tym przypadku chcemy sprawdzić, czy formprops jest valid i musimy jeszcze z

4:05form props wyciągnąć sobie dirty state.

4:08Czyli w tym momencie, jeżeli coś jest dirty i jednocześnie jest invalid, no to

4:13wtedy jak gdyby chcemy to opacity sobie zmienić.

4:15Więc tutaj poprawiamy sobie to delikatnie.

4:17Ale zobacz, że name is required I name need to be at least two characters long

4:24działa nam poprawnie i to walidowanie funkcjonuje w naszym formularzu.

4:29Teraz możemy sobie zapisać nową osobę.

4:32Zobacz, że jeżeli formularz nie jest poprawnie uzupełniony, to nie wywoła nam

4:38się akcja handle submit, więc nie musimy już tutaj sprawdzać, czy

4:42wszystko jest w porządku.

4:43Robi to za nas formik.

4:45Dodatkowo tutaj mamy tablicę errorów.

4:47Dokładnie jest to obiekt, którym dodajemy sobie, które z naszych pól ma problem.

4:53Ważne jest to, że musimy mieć tutaj nama albo ID zastosowane do inputa.

4:59Jeżeli tego nie będziemy mieć, będziemy mieli problem taki, że nie do końca

5:04wszystko będzie funkcjonowało.

5:05Zasadniczo nic nie będzie nam tutaj działać.

5:08Zobacz, że nie mogę nic uzupełnić w formularzu.

5:10Na szczęście dostaję informację zwrotną od formika, że tutaj nie mamy ID albo name,

5:18więc proszę pamiętaj o tym, że to name musi być teraz obecne.

5:21I w tym momencie mamy pełną walidację formularza.

5:25Wyobraź sobie, jeśli byłoby tu więcej pól, to po prostu musielibyśmy

5:29wrzucić je do insert values.

5:31Gdybym miał jakiekolwiek pamiętać o nich przy walidowaniu i pozostałe tematy mamy

5:37już tak naprawdę gotowe, musielibyśmy jeszcze użyć tych zapisów, ale tutaj z

5:42odpowiednim name dla konkretnego pola.