Inertia.js validation errors not propagating to Vue component

I'm having trouble getting Laravel validation errors to automatically bind to my Inertia form.

Here's my setup:

Controller:

public function register(Request $request) : RedirectResponse {
    $request->validate([
        'country_id' => 'required',
        'state_id' => 'required'            
    ]);
    
    return to_route('user.home')->with('success', 'Team registered successfully!');
}

Vue Component:

const form = useForm({
    country_id: '',
    state_id: ''
});

const submit = () => {
    form.post(route('team.register.submit'), {
        onSuccess: () => {},
        onError: () => { }
    });
};

The Problem:

When validation fails, I'm not getting the errors automatically bound to form.errors as expected with Inertia

However, when I check the network tab, I do see the proper JSON error response with validation messages

The page doesn't update with the error messages

LaryAI

11 months ago

Level 58

Certainly! This is a common issue when using Inertia.js with Laravel validation. The root cause is usually that the controller is returning a standard Laravel redirect (which is for traditional web apps), rather than letting Inertia handle the error response.

The Problem

Your controller uses:

$request->validate([
    'country_id' => 'required',
    'state_id' => 'required'            
]);

If validation fails, Laravel redirects back with errors (intended for Blade, not Inertia). Inertia expects a JSON response with a 422 status code for validation errors, so it can automatically bind errors to form.errors.

The Solution

Don't use $request->validate() in Inertia controllers.
Instead, use a Validator instance and manually throw the errors if validation fails:

use Illuminate\Support\Facades\Validator;
use Illuminate\Validation\ValidationException;

public function register(Request $request)
{
    $validator = Validator::make($request->all(), [
        'country_id' => 'required',
        'state_id' => 'required'
    ]);

    if ($validator->fails()) {
        throw new ValidationException($validator);
    }

    // ... your logic

    return to_route('user.home')->with('success', 'Team registered successfully!');
}

This will cause Laravel to return a 422 JSON response with errors, which Inertia will automatically bind to your form.errors.

TL;DR

Don't use $request->validate() in Inertia controllers.
Use the Validator facade and throw ValidationException manually.

Reference

Let me know if you need help displaying the errors in your Vue component!

eyantra

11 months ago

Level 6

Already tried that, My issue is after validation fails it's redirecting to the page but without any data,

this is what i get in Response:

getting props empty, Do i missing some inertia configuration.

I am using Laravel 12, Vue3 and Inertia.

{
    "component": "public\/TeamRegistration",
    "props": [],
    "url": "\/teamRegister",
    "version": "",
    "clearHistory": false,
    "encryptHistory": false
}

eyantra

11 months ago

Level 6

Resolved.

need to register a Inertia Middleware in bootstrap/app.php

Please or to participate in this conversation.