Прекогниция в Inertia

Давайте выясним, как проверять поле сразу после правки, не дожидаясь нажатия «Save». Правила остаются на сервере, а клиент лишь запрашивает вердикт по одному имени поля, когда человек его изменил.

У хелпера прекогницию включают цепочкой withPrecognition с методом и адресом, куда уйдут те же данные, что и при сохранении. Затем вызывают validate с именем поля, обычно из обработчика change. Сообщение попадает в form.errors, а признак invalid подсказывает, есть ли ошибка у поля. На стороне Laravel для таких запросов к маршруту нужен посредник прекогниции.

Давайте подключим посредник к маршруту сохранения:

<?php
	use App\Http\Requests\StorePostRequest;
	use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
	use Illuminate\Support\Facades\Route;
	use Inertia\Inertia;

	Route::get('/posts/create', function () {
		return Inertia::render('Posts/Create');
	});

	Route::post('/posts', function (StorePostRequest $request) {
		return back();
	})->middleware([HandlePrecognitiveRequests::class]);
?>

Давайте опишем правила в form request:

<?php

	namespace App\Http\Requests;

	use Illuminate\Foundation\Http\FormRequest;

	class StorePostRequest extends FormRequest
	{
		public function rules(): array
		{
			return [
				'title' => 'required|string',
			];
		}
	}
?>

Давайте включим прекогницию и проверим заголовок по изменению:

<script setup>
	import { useForm } from '@inertiajs/vue3'

	const form = useForm({
		title: '',
	}).withPrecognition('post', '/posts')

	function submit() {
		form.submit()
	}
</script>

<template>
	<form @submit.prevent="submit">
		<input
			type="text"
			v-model="form.title"
			@change="form.validate('title')"
		/>
		<p v-if="form.invalid('title')">
			{{ form.errors.title }}
		</p>
		<button type="submit">Save</button>
	</form>
</template>

Сделайте форму работника Vera так, чтобы пустое имя подсвечивалось сразу после изменения поля, ещё до отправки формы.