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

> Een Laravel-functie om server-side validatie realtime uit te voeren vóór het versturen van een formulier

## Wat is Precognition

Precognition is een mechanisme om server-side validatie uit te voeren vóórdat een formulier wordt verstuurd.
Je kunt de validatieregels van Laravel direct gebruiken, zonder ze dubbel te definiëren in de frontend.

Anders dan bij een gewoon request worden bij een Precognition-request de middleware van de route en de validatie van de form request wel uitgevoerd, maar de controllermethode zelf niet.
Daardoor is het geschikt voor realtime validatie tijdens het typen.

## Installatie

In Laravel 13 hoef je aan de backend-kant `laravel/precognition` niet extra te installeren.
Wat je nodig hebt zijn de helperpakketten voor de 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 heeft vanaf 2.3 ingebouwde ondersteuning voor Precognition. Ook in Inertia 3 kun je het direct gebruiken.
  Gebruik je Inertia-formulieren, dan is het extra installeren van `laravel-precognition-vue` / `laravel-precognition-react` meestal niet nodig.
</Info>

## Backendconfiguratie

Voeg de `HandlePrecognitiveRequests`-middleware toe aan de route.
Het is praktisch om de validatieregels te bundelen in een form request.
Door ze in een form request onder te brengen, zijn hergebruik van regels en scheiding van verantwoordelijkheden makkelijker.

```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) {
    // Dit wordt alleen uitgevoerd bij een gewone verzending
})->middleware([HandlePrecognitiveRequests::class]);
```

Heb je eigen middleware met bijwerkingen, sla die dan over tijdens Precognition.

```php theme={null}
public function handle(Request $request, Closure $next): mixed
{
    if (! $request->isPrecognitive()) {
        Interaction::incrementFor($request->user());
    }

    return $next($request);
}
```

## Frontendintegratie

### 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')}
/>
```

### Vanilla JS met Axios

De Precognition-bibliotheek gebruikt Axios.
Wil je een bestaande Axios-instantie gebruiken, dan vervang je die met `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);
```

## De timing van validatie sturen

Voor validatie per invoer gebruik je `validate()`.

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

De debounce-tijd stel je bij met `setValidationTimeout()`.

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

Wil je ook bestanden telkens valideren, gebruik dan `validateFiles()`.

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

Array-invoer valideer je met een wildcard.

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

## De formulierhelper

Met `useForm()` beheer je de verzend- en foutstatus in één geheel.

* `validating`: er loopt een validatierequest
* `processing`: bezig met verzenden
* `errors`: lijst met fouten
* `valid('field')` / `invalid('field')`: validatiestatus van een veld
* `submit()`: gewone verzending

```js theme={null}
const submit = () => form.submit()
    .then(() => form.reset());
```

## Vergelijking van gewone requests en Precognition-requests

Het onderstaande diagram toont het verschil in verwerking tussen een gewoon request en een Precognition-request.

```mermaid theme={null}
sequenceDiagram
    participant User as Gebruiker
    participant Frontend as Frontend
    participant Server as Laravel-server

    User->>Frontend: Formulierinvoer
    Frontend->>Server: Precognition-request (Precognition: true-header)
    Server->>Server: Validatie uitvoeren (controllerlogica niet uitgevoerd)
    Server-->>Frontend: Validatieresultaat
    Frontend-->>User: Realtime foutweergave
    User->>Frontend: Formulier versturen
    Frontend->>Server: Gewoon request
    Server-->>Frontend: Response
```

## Gerelateerde links

* [Officiële Laravel-docs: Precognition](https://laravel.com/docs/precognition)
* [Officiële Laravel-docs: Validation](https://laravel.com/docs/validation)