Hi, I used validate('email') but this still occurs. The data was being sent to the server in both cases.

validate('email') requires the input to be touched. It results in a POST to /, which resolves to a 302 redirect. This leads to a GET /, which is a 200 and gives me a console error:

Uncaught (in promise) Error: Did not receive a Precognition response. Ensure you have the Precognition middleware in place for the route.

This 302 happens even if I don't have the HandlePrecognitiveRequests middleware in web.php. I'm not sure what could be causing this or if it's intended behaviour.

If I set the HandlePrecognitiveRequests middleware on my GET / route (which I believe is incorrect), then it returns a 204. The appropriate headers are passed between those requests but no data is.

validate() still sends the data to the server. It results in a POST to / which resolves to a 204 even though the data is invalid according to EmailRequest::rules().

I'm using a fresh install of Laravel, Inertia, and Vue. Here is my set up:

// routes/web.php
use App\Http\Requests\EmailRequest;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
use Illuminate\Support\Facades\Route;

Route::inertia('/', 'Welcome')->name('home');
Route::post('/', function (EmailRequest $request) {
    dd(request()->all(), request()->safe());
})->middleware(HandlePrecognitiveRequests::class);

<?php
// app\Http\Requests\EmailRequest.php
namespace App\Http\Requests;

use Illuminate\Contracts\Validation\ValidationRule;
use Illuminate\Foundation\Http\FormRequest;

class EmailRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     */
    public function authorize(): bool
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, ValidationRule|array<mixed>|string>
     */
    public function rules(): array
    {
        return [
            'email' => 'email',
        ];
    }
}

// resources\js\pages\Welcome.vue
<script setup lang="ts">
import { Form } from '@inertiajs/vue3';
</script>

<template>
    <Form method="post" #default="{errors, validate}">
        <input name="email" value="123">
        <p>{{ errors.email }}</p>
        <a @click="validate()">Validate</a><br>
        <button>Submit</button>
    </Form>
</template>

Clicking Submit will display the error, but clicking Validate will return have precognition return 204 response. Am I missing some code somewhere to make this work?