Komunikaty błędów i stany touched/dirty (Vanilla)
Proszę wyświetlać błędy dopiero po wejściu w interakcję z polami (touched) lub ich zmianie (dirty), aby poprawić UX dzięki przejrzystym i odpowiednio podawanym informacjom zwrotnym.
Komunikaty błędów i stany touched/dirty (Vanilla) to bezpłatna lekcja React Academy na CoddyKit. To lekcja 3 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 3 lekcji w sumie.
Po co znaczniki touched i dirty?
Cel: Wyświetlać komunikaty walidacji we właściwym momencie za pomocą znaczników touched (odwiedzone) i dirty (zmienione).
Definicje
Touched: użytkownik ustawił fokus na polu, a następnie go z niego usunął. Dirty: wartość pola różni się od wartości początkowej. Znaczników tych należy używać do określania momentu wyświetlania błędów.
Demo: obsługa touched i dirty
Śledzimy touched po opuszczeniu pola i dirty po zmianie wartości; błędy pojawiają się po wejściu w interakcję z polem lub po wysłaniu formularza.
<div id="root"></div>
Moment wyświetlania komunikatów
Błędy należy wyświetlać po oznaczeniu pola jako touched (po jego opuszczeniu) albo po wysłaniu formularza. Znacznika dirty należy używać do wyróżniania zmienionych pól.
Lepsza informacja zwrotna
Wskazówki:
- Komunikaty powinny być krótkie i konkretne.
- Nie należy blokować wpisywania danych; walidację należy przeprowadzać łagodnie.
- Dla większej przejrzystości należy używać koloru i umieszczać komunikaty blisko pól.
Pułapki
Należy unikać:
- Wyświetlania wszystkich błędów przy pierwszym renderowaniu.
- Ukrywania błędów po wysłaniu formularza.
- Łączenia niekontrolowanych pól wejściowych ze stanem walidacji.
Sprawdzenie definicji touched
Podsumowanie
Podsumowanie: Znacznika touched należy używać do wyświetlania błędów po interakcji, a dirty do oznaczania zmienionych pól; komunikaty powinny być krótkie i pomocne.
Często zadawane pytania
Czy lekcja „Komunikaty błędów i stany touched/dirty (Vanilla)” jest bezpłatna?
Tak — pełny tekst „Komunikaty błędów i stany touched/dirty (Vanilla)” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Komunikaty błędów i stany touched/dirty (Vanilla)”?
Proszę wyświetlać błędy dopiero po wejściu w interakcję z polami (touched) lub ich zmianie (dirty), aby poprawić UX dzięki przejrzystym i odpowiednio podawanym informacjom zwrotnym. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć React Academy?
Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 3.
Ile czasu zajmuje lekcja „Komunikaty błędów i stany touched/dirty (Vanilla)”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?
Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Kontrolowane formularze z wieloma polami
- Podstawowe wzorce walidacji i obsługa wysyłania
- Komunikaty błędów i stany touched/dirty (Vanilla)