Formularze w Inertia.js — useForm i walidacja [2026]

Formularze to miejsce, w którym Inertia.js spłaca swój dług. W klasycznym SPA odtwarzasz połowę pipeline'u walidacji Laravela w JavaScripcie; z Inertią reguły zostają w Laravelu, a strona React dostaje mały, kompletny zestaw do stanu, błędów i wysyłki. Ten przewodnik pokazuje wzorce, których używamy produkcyjnie — od prostego formularza tworzenia po upload plików i ochronę przed utratą zmian.

• Tło architektoniczne: Inertia.js z Laravel i React — SPA bez osobnego API.

Hook useForm w 20 liniach

import { useForm } from '@inertiajs/react';

export default function CreateOrder({ customers }) {
    const { data, setData, post, processing, errors } = useForm({
        customer_id: '',
        note: '',
    });

    function submit(e) {
        e.preventDefault();
        post('/orders');
    }

    return (
        <form onSubmit={submit}>
            <select value={data.customer_id} onChange={(e) => setData('customer_id', e.target.value)}>
                <option value="">Wybierz klienta…</option>
                {customers.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
            {errors.customer_id && <p className="text-red-500">{errors.customer_id}</p>}

            <textarea value={data.note} onChange={(e) => setData('note', e.target.value)} />
            {errors.note && <p className="text-red-500">{errors.note}</p>}

            <button disabled={processing}>Utwórz zamówienie</button>
        </form>
    );
}

Strona Laravela to zwykła walidacja — bez specjalnej integracji

public function store(StoreOrderRequest $request)
{
    Order::create($request->validated());

    return redirect()->route('orders.index')->with('success', 'Zamówienie utworzone.');
}

Gdy walidacja zawiedzie, Inertia przekierowuje z powrotem z błędami w propsach; useForm czyta je automatycznie. Wszystkie pola zostają wypełnione — nic nie trzeba zabezpieczać ręcznie.

Co daje useForm

Upload plików

const { data, setData, post, progress } = useForm({ document: null });

post('/contracts', {
    forceFormData: true, // multipart nawet dla małych payloadów
});

Inertia sama wysyła upload jako multipart, gdy wykryje File. progress zasila pasek postępu; Laravel waliduje plik dokładnie jak w każdym formularzu Blade (mimes:pdf, max:10240).

Wzorce, które chronią przed błędami

Uwaga: Nigdy nie rozrzucaj data do kontrolowanych inputów, które dodatkowo resetujesz remountem komponentu. Jeśli strona renderuje się z nowym kluczem, stan useForm powstaje od nowa i wpisane dane znikają — najczęstszy błąd „Inertia zjadła mój formularz".

• Jedna useForm na formularz. Wiele hooków na jednej stronie zaprasza rozjazd stanu; wydziel sekcje do komponentów, które dostają form jako prop.
• Serwer decyduje, klient wyświetla. Walidację biznesową trzymaj w FormRequestach; React tylko renderuje błędy. Zero zdublowanych zestawów reguł.
• Wyłączaj, nie ukrywaj. Podczas processing wyłącz przycisk — podwójne kliknięcie tworzy dwa zamówienia.
• Ochrona isDirty. Połącz isDirty z useEffect, by ostrzec przed wyjściem z niezapisanymi zmianami.
• Redirect po sukcesie. Zwróć redirect() z kontrolera — Inertia pójdzie za nim jak za zwykłą wizytą, a stan formularza zresetuje się razem ze stroną.

Testowanie przepływów formularzowych

Testy feature ćwiczą te same endpointy, do których strzela formularz — reguły walidacji, autoryzację, przekierowania. Po stronie frontendu testy komponentów pokrywają renderowanie błędów i stany wyłączenia. Nasze podejście: testowanie aplikacji Inertia.js.

Kiedy sięgnąć po bibliotekę formularzy

Złożone kreatory z warunkowym rozgałęzianiem po stronie klienta, dynamiczne tablice pól i mocne zależności między inputami wciąż korzystają z Formika lub React Hook Form — z useForm obsługującą finalną wysyłkę. W naszych projektach to wyjątek, nie reguła: większość formularzy CRUD jest czystsza w czystym useForm.

Potrzebujesz formularzy, które wytrzymują realnych użytkowników?

Zobacz tworzenie aplikacji Laravel.

FAQ

Jak Inertia.js obsługuje błędy walidacji?

Laravel rzuca ValidationException; Inertia przekierowuje z błędami w propsach; useForm mapuje je na pola. Bez ręcznego podłączania.

Czy potrzebuję Formika albo React Hook Form?

Rzadko. useForm pokrywa stan, błędy, processing i uploady. Biblioteki opłacają się przy złożoności po stronie klienta, np. wieloetapowych kreatorach.

Dlaczego formularz traci dane przy błędzie walidacji?

Zwykle bo pola żyją poza useForm albo komponent montuje się z nowym kluczem. Trzymaj cały stan w useForm — z założenia zachowuje wartości.

👉 Potrzebujesz solidnych formularzy w Laravelu? Zobacz tworzenie aplikacji Laravel albo programista Laravel na zlecenie.

📖 Czytaj dalej: Inertia.js z Laravel i React, Inertia.js v2 — nowości i testowanie aplikacji Inertia.js.