Precognition

Funcionalidad de Laravel que ejecuta la validación del lado del servidor en tiempo real antes de enviar el formulario

​

¿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]);

Si tienes middleware propio con efectos secundarios, sáltalo cuando la solicitud sea Precognition.

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().

form.validate('email');

Puedes ajustar el tiempo de debounce con setValidationTimeout().

form.setValidationTimeout(3000);

Si quieres validar también los archivos en cada llamada, usa validateFiles().

form.validateFiles();

Los campos de tipo array se validan usando comodines.

form.validate('users.*.email');

​

Helper de formulario

useForm() te permite manejar de forma unificada el estado de envío y los errores.

• validating: solicitud de validación en curso
• processing: envío en curso
• errors: lista de errores
• valid('field') / invalid('field'): estado de validación del campo
• submit(): 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

• Documentación oficial: Precognition
• Documentación oficial: Validation