← Wszystkie tematy W 26% ogłoszeń · 12 z 47 ogłoszeń frontend React

Formularze i walidacja

Formularz u lekarza, który sam podpowiada

Formularze i walidacja pojawiają się w 12 z 47 ogłoszeń, często przy panelach i procesach biznesowych. Pytają o pola zależne, walidację i obsługę błędów z serwera.

Przerobione Opanowane 0 z 4 pytań

Ucz się z Claude Wytłumacz od zera Próbna rozmowa Zadanie praktyczne Ściąga na 1 stronę

Co piszą w ogłoszeniach

„praktyczna znajomość React.js, w tym React Hooks, Custom Hooks, Context API, Vite, Vitest/Jest, React Hook Form oraz Fetch/Axios – minimum 5 lat doświadczenia lub 8 projektów”
Randlab · React Developer – (K/M/N)
„Praktyczne doświadczenie w tworzeniu WebPartów, formularzy i komponentów biznesowych dla SharePoint Online.”
Experis Manpower Group · Programista Frontend React (SharePoint Online)
„Minimum 5 lat doświadczenia w pracy z React.js, w tym znajomość React Hooks, Custom Hooks, Context API, Vite, Vitest/Jest, React Hook Form oraz Fetch/Axios,”
GET IT TOGETHER Sp. z o.o. · Frontend Developer (React)

Scena · formularz zamówienia

Formularz, który sam podpowiada

U lekarza pani w okienku patrzy, co wpisujesz, i od razu mówi: „tu brakuje numeru”. To walidacja na froncie: miła i szybka. Ale lekarz w gabinecie i tak sprawdza wszystko jeszcze raz, bo ktoś mógł ominąć okienko. To walidacja na serwerze. Zamów lizaka, spróbuj błędów, a potem ominij formularz.

Serwer: zamówienia

Blokuj przycisk podczas wysyłania Walidacja na serwerze

Kliknij „Zamów lizaka” z pustym formularzem.

Porównajmy

Okienko czy gabinet?

	Walidacja na froncie	Walidacja na serwerze
Po co?	Żeby było miło i szybko.Natychmiastowy feedback, mniej zbędnych żądań.	Żeby było bezpiecznie.Jedyna walidacja, której nie da się ominąć.
Da się ominąć?	Tak, wystarczy ominąć okienko.curl, Postman, DevTools, wyłączony JS.	Nie.Serwer to ostatnia linia obrony.
Narzędzia	Schemat i formularz.React Hook Form + Zod (`zodResolver`), atrybuty HTML: `required`, `type="email"`.	Ten sam schemat.Zod współdzielony z backendem w monorepo, odpowiedź 422 z błędami pól.
Błąd z serwera	Pokaż przy właściwym polu.`setError("email", ...)` z odpowiedzi 422.	Zwróć, które pole i dlaczego.`{ errors: { email: "zajęty" } }`.
Podwójne kliknięcie	Zablokuj przycisk na czas wysyłki.`disabled` + `isSubmitting`, stan „Wysyłam…”.	Rozpoznaj powtórkę.Klucz idempotencji: to samo zamówienie nie powstanie dwa razy.

Okienko i gabinet

Front sprawdza, żeby było miło. Serwer sprawdza, żeby było bezpiecznie. Potrzebne są oba.

Błąd przy polu

Komunikat stoi obok pola, mówi, jak to naprawić, i jest połączony przez aria-describedby.

Jeden klik, jedno zamówienie

Blokuj przycisk na froncie i rozpoznawaj powtórki na serwerze.

Sprawdź się

Pytania z rozmów

Najpierw odpowiedz na głos, dopiero potem rozwiń odpowiedź.

Jak zbudować formularz z polami zależnymi od siebie? (React Hook Form + Zod)

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Jak wybierzesz kuriera, formularz pyta o adres. Jak wybierzesz paczkomat, adres znika, a pojawia się kod paczkomatu.

Na rozmowę: React Hook Form z zodResolver i schematem Zod opartym na discriminated union: z.discriminatedUnion("delivery", [z.object({ delivery: z.literal("kurier"), address: ... }), z.object({ delivery: z.literal("paczkomat"), locker: ... })]). Wartość pola obserwuję przez watch / useWatch i warunkowo renderuję pola. Przy ukrywaniu pola ustawiam shouldUnregister albo czyszczę wartość, żeby nie wysłać śmieci. Reguły krzyżowe (data do po dacie od) przez superRefine. Typ formularza wyprowadzam z z.infer, więc front i walidacja mają jedno źródło prawdy.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Walidacja na froncie vs na backendzie: czemu potrzebne są obie?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Pani w okienku od razu mówi, czego brakuje, żeby było miło. Lekarz w gabinecie sprawdza wszystko jeszcze raz, bo ktoś mógł ominąć okienko.

Na rozmowę: Front daje szybki feedback i oszczędza żądania, ale da się go ominąć (curl, DevTools, stara wersja aplikacji), więc nie jest zabezpieczeniem. Backend jest jedyną walidacją, której nie da się obejść, i sprawdza też rzeczy niewidoczne dla frontu (unikalność maila, uprawnienia, stan magazynu). Najlepiej współdzielić schemat (Zod w monorepo albo schemat z OpenAPI), a błędy serwera zwracać jako 422 z mapą pól i pokazywać przy polach przez setError.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Jak obsłużyć wysyłanie: blokada podwójnego kliknięcia, błędy z serwera przy konkretnych polach?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Po kliknięciu przycisk mówi „wysyłam” i nie da się go nacisnąć drugi raz. Gdy lekarz znajdzie błąd, pokazuje go palcem przy konkretnym okienku.

Na rozmowę: Podczas wysyłania blokuję przycisk (formState.isSubmitting albo useActionState / useFormStatus w React 19) i pokazuję stan „Wysyłam…”. Na serwerze klucz idempotencji (np. nagłówek Idempotency-Key), żeby powtórzone żądanie nie utworzyło drugiego zamówienia. Błędy 422 mapuję na pola przez setError("email", { message }), błędy ogólne pokazuję nad formularzem w regionie role="alert", a fokus przenoszę na pierwsze błędne pole. Po sukcesie reset formularza i komunikat.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Jak dostępnie pokazać błąd walidacji przy polu?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Kartka z błędem wisi przy okienku, a nie na drugim końcu pokoju, i mówi, jak to naprawić.

Na rozmowę: Widoczny <label for>, komunikat błędu jako tekst pod polem połączony przez aria-describedby, aria-invalid="true" na polu, nie sam kolor. Treść mówi, jak naprawić. Walidację pokazuję po opuszczeniu pola lub po submit, nie przy każdej literze. Po nieudanym submit fokus na pierwsze błędne pole.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Poziom wyżej

Wersja dla seniora

Tak wyglądają pytania na seniora i leada: nie ma jednej dobrej odpowiedzi, liczy się to, jak ważysz kompromisy i czy mówisz o skali, ryzyku i ludziach.

Przypadek 1

Wniosek kredytowy w 7 krokach z autozapisem

Klient wypełnia wniosek w 7 krokach przez 20 minut, czasem na telefonie, czasem przerywa i wraca następnego dnia na laptopie. Dziś po odświeżeniu strony wszystko znika, a 40% osób porzuca wniosek w kroku z dochodami.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy projektujesz zapis po stronie serwera, a nie tylko w przeglądarce
Czy myślisz o krokach jako o stanie w URL i maszynie stanów
Czy pamiętasz o danych wrażliwych i wersjonowaniu formularza
Czy proponujesz pomiar porzuceń

Odpowiedź seniora

Wniosek to szkic zapisany na serwerze z identyfikatorem i wersją. Autozapis wysyła zmiany z debounce i przy przejściu między krokami, a w UI widać stan „zapisano o 14:32”. Zapis w IndexedDB służy tylko jako bufor przy braku sieci. Powrót na innym urządzeniu działa po zalogowaniu albo przez link z mailem, więc nie trzymam danych finansowych w localStorage.

Krok jest w URL, żeby Wstecz w przeglądarce działał i dało się wrócić do konkretnego miejsca. Logikę przejść (które kroki są dostępne, warunkowe kroki dla firmy, krok weryfikacji) opisuję maszyną stanów albo reducerem z jawnymi stanami. Każdy krok ma własny schemat walidacji, a na końcu walidacja całości na serwerze.

Schemat formularza wersjonuję: gdy zmienią się pola, szkic w starej wersji jest migrowany przy otwarciu. Mierzę lejek per krok i per pole (czas, błędy walidacji, porzucenia), co zwykle pokazuje konkretne pole do uproszczenia, np. dochód, który można pobrać z innego źródła za zgodą klienta.

Typowe wpadki

Zapis szkicu tylko w localStorage
Jeden wielki formularz z walidacją wszystkiego na końcu
Brak migracji szkiców po zmianie pól

Dopytają o

Jak rozwiążesz konflikt, gdy wniosek jest otwarty na dwóch urządzeniach?
Jak długo przechowujesz szkic z danymi osobowymi?
Jak dostępnie pokażesz postęp kroków?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 2

Jedna walidacja dla frontu i backendu

Te same zasady walidacji (NIP, kod pocztowy, zależności między polami, limity kwot) są napisane trzy razy: w React, w backendzie w Node i w aplikacji mobilnej. Co miesiąc któraś wersja się rozjeżdża i klient widzi błąd dopiero po wysłaniu.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy znasz sposoby współdzielenia schematów
Czy rozróżniasz walidację, którą można współdzielić, od tej wymagającej serwera
Czy myślisz o komunikatach i tłumaczeniach

Odpowiedź seniora

Schemat jest jednym źródłem prawdy. W ekosystemie TypeScript trzymam go w paczce współdzielonej w monorepo (Zod lub Valibot): front używa go przez resolver React Hook Form, backend w Node waliduje tym samym schematem i z niego wyprowadza typy. Dla aplikacji mobilnej w innym języku lepszy jest JSON Schema albo OpenAPI generowany ze schematu i walidowany biblioteką na każdej platformie.

Rozdzielam rodzaje reguł. Format i zależności między polami są współdzielone i działają od razu w przeglądarce. Reguły wymagające danych (czy NIP istnieje w rejestrze, limit kredytowy klienta) są tylko na serwerze, a front pokazuje je jako błędy pól z odpowiedzi API w ustalonym formacie (np. problem+json z listą pól).

Komunikaty to klucze tłumaczeń, a nie teksty w schemacie, żeby front mógł je przetłumaczyć i dopasować. Testy kontraktowe sprawdzają, że ten sam zestaw danych przechodzi lub nie przechodzi walidacji na każdej platformie.

Typowe wpadki

Walidacja tylko na froncie
Teksty błędów zaszyte w schemacie w jednym języku
Kopiowanie wyrażeń regularnych między projektami

Dopytają o

Jak obsłużysz walidację asynchroniczną bez zalewania API żądaniami?
Co się stanie, gdy backend zaostrzy regułę przed wdrożeniem frontu?
Jak przekażesz błąd z serwera do konkretnego pola w zagnieżdżonej tablicy?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 3

Formularz z 400 polami i tabelami pozycji

System dla księgowych ma formularz deklaracji z 400 polami, kilkoma tabelami, w których można dodać setki wierszy, i polami wyliczanymi z innych pól. Na słabszych laptopach wpisywanie znaku trwa pół sekundy, a wysłanie formularza blokuje stronę na kilka sekund.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy wiesz, skąd bierze się wolne wpisywanie w dużych formularzach
Czy znasz techniki: pola niekontrolowane, useFieldArray, wirtualizacja
Czy myślisz o obliczeniach poza głównym wątkiem

Odpowiedź seniora

Mierzę Profilerem i zwykle widzę, że każda litera renderuje cały formularz, bo stan jest w jednym obiekcie, a wyliczenia liczą się w renderze. Przechodzę na React Hook Form z polami niekontrolowanymi: wpisywanie nie renderuje Reacta, a pola wyliczane subskrybują tylko swoje zależności przez useWatch.

Tabele pozycji obsługuje useFieldArray ze stabilnymi kluczami, a przy setkach wierszy wirtualizacja (TanStack Virtual), żeby w DOM były tylko widoczne wiersze. Sumy i wyliczenia podatkowe liczą się z debounce, a ciężkie operacje (walidacja całości, generowanie podglądu) w Web Workerze.

Walidacja przy wpisywaniu dotyczy tylko bieżącego pola. Pełna walidacja przy przejściu sekcji i przy wysłaniu, w workerze, z listą błędów i linkami do pól. Formularz dzielę na sekcje ładowane na żądanie. Ustalam budżet: wpisanie znaku poniżej 50 ms na referencyjnym słabym laptopie i test wydajności w CI.

Typowe wpadki

Dokładanie memo bez zmiany modelu stanu
Walidacja całego formularza przy każdym znaku
Renderowanie setek wierszy tabeli naraz

Dopytają o

Jak zapewnisz dostępność w wirtualizowanej tabeli?
Jak przetestujesz poprawność wyliczeń podatkowych?
Co jeśli użytkownik wklei 500 wierszy z Excela?

Zapytaj Claude Rozwiń case Zagraj interviewera