¿Qué es Precognition?
Precognition es un mecanismo que ejecuta la validación del lado del servidor antes de enviar el formulario.
Puedes usar directamente las reglas de Laravel sin duplicar la definición de reglas en el frontend.
A diferencia de una solicitud normal, en una solicitud Precognition se ejecutan los middleware de la ruta y la validación de la form request, pero no se ejecuta el cuerpo del método del controlador.
Por eso es ideal para validaciones en tiempo real durante la entrada del usuario.
Instalación
En Laravel 13 no necesitas instalar adicionalmente laravel/precognition en el backend.
Lo único necesario son los paquetes helper del frontend.
- Vue:
laravel-precognition-vue
- React:
laravel-precognition-react
- Alpine.js:
laravel-precognition-alpine
npm install laravel-precognition-vue
npm install laravel-precognition-react
npm install laravel-precognition-alpine
Inertia incluye soporte para Precognition a partir de la versión 2.3. También funciona directamente en Inertia 3.
Si usas formularios de Inertia, normalmente no necesitas instalar además laravel-precognition-vue / laravel-precognition-react.
Configuración del backend
Añade el middleware HandlePrecognitiveRequests a la ruta.
En la práctica, conviene concentrar las reglas de validación en una form request.
Agruparlas en una form request facilita la reutilización de reglas y la separación de responsabilidades.
use App\Http\Requests\StoreUserRequest;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;
use Illuminate\Support\Facades\Route;
Route::post('/users', function (StoreUserRequest $request) {
// Solo se ejecuta en un envío normal
})->middleware([HandlePrecognitiveRequests::class]);
public function handle(Request $request, Closure $next): mixed
{
if (! $request->isPrecognitive()) {
Interaction::incrementFor($request->user());
}
return $next($request);
}
Integración en el frontend
Alpine.js (Blade)
<form x-data="{
form: $form('post', '/users', { name: '', email: '' }),
}">
@csrf
<input x-model="form.name" @change="form.validate('name')" />
<template x-if="form.invalid('name')">
<div x-text="form.errors.name"></div>
</template>
</form>
Vue (Inertia.js)
<script setup>
import { useForm } from 'laravel-precognition-vue';
const form = useForm('post', '/users', {
name: '',
email: '',
});
</script>
<template>
<input v-model="form.name" @change="form.validate('name')" />
<div v-if="form.invalid('name')">{{ form.errors.name }}</div>
</template>
React (Inertia.js)
import { useForm } from 'laravel-precognition-react';
const form = useForm('post', '/users', {
name: '',
email: '',
});
<input
value={form.data.name}
onChange={(e) => form.setData('name', e.target.value)}
onBlur={() => form.validate('name')}
/>
JavaScript puro con Axios
Las librerías de Precognition usan Axios.
Si vas a usar una instancia de Axios existente, sustitúyela con client.use().
import Axios from 'axios';
import { client } from 'laravel-precognition-vue';
window.axios = Axios.create();
window.axios.defaults.headers.common['Authorization'] = authToken;
client.use(window.axios);
Control del momento de la validación
Para validar campo a campo usa validate().
Puedes ajustar el tiempo de debounce con setValidationTimeout().
form.setValidationTimeout(3000);
validateFiles().
Los campos de tipo array se validan usando comodines.
form.validate('users.*.email');
useForm() te permite manejar de forma unificada el estado de envío y los errores.
validating: solicitud de validación en cursoprocessing: envío en cursoerrors: lista de erroresvalid('field') / invalid('field'): estado de validación del camposubmit(): envío normal
const submit = () => form.submit()
.then(() => form.reset());
Comparación entre solicitudes normales y solicitudes Precognition
El siguiente diagrama muestra la diferencia entre una solicitud normal y una Precognition.
Enlaces relacionados
