> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.

# 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`

```shell theme={null}
npm install laravel-precognition-vue
```

```shell theme={null}
npm install laravel-precognition-react
```

```shell theme={null}
npm install laravel-precognition-alpine
```

<Info>
  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`.
</Info>

## 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.

```php theme={null}
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.

```php theme={null}
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)

```html theme={null}
<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)

```vue theme={null}
<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)

```jsx theme={null}
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()`.

```js theme={null}
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()`.

```js theme={null}
form.validate('email');
```

Puedes ajustar el tiempo de debounce con `setValidationTimeout()`.

```js theme={null}
form.setValidationTimeout(3000);
```

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

```js theme={null}
form.validateFiles();
```

Los campos de tipo array se validan usando comodines.

```js theme={null}
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

```js theme={null}
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.

```mermaid theme={null}
sequenceDiagram
    participant User as Usuario
    participant Frontend as Frontend
    participant Server as Servidor Laravel

    User->>Frontend: Rellenar formulario
    Frontend->>Server: Solicitud Precognition (cabecera Precognition: true)
    Server->>Server: Ejecuta validación (sin ejecutar la lógica del controlador)
    Server-->>Frontend: Resultado de validación
    Frontend-->>User: Muestra errores en tiempo real
    User->>Frontend: Envía el formulario
    Frontend->>Server: Solicitud normal
    Server-->>Frontend: Respuesta
```

## Enlaces relacionados

* [Documentación oficial: Precognition](https://laravel.com/docs/precognition)
* [Documentación oficial: Validation](https://laravel.com/docs/validation)