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

> Die Laravel-Funktion, die Server-seitige Validierung schon vor dem Absenden eines Formulars in Echtzeit ausführt.

## Was ist Precognition

Precognition ist ein Mechanismus, der die Server-seitige Validierung bereits vor dem Absenden eines Formulars ausführt.
So können Sie im Frontend dieselben Laravel-Regeln nutzen, ohne die Validierungslogik doppelt zu pflegen.

Anders als bei einem normalen Request werden bei einem Precognition-Request Route-Middleware und Form-Request-Validierung ausgeführt, der eigentliche Body der Controller-Methode aber **nicht**.
Deshalb eignet sich Precognition gut für die Echtzeit-Validierung während der Eingabe.

## Installation

Seit Laravel 13 müssen Sie backendseitig `laravel/precognition` nicht mehr separat installieren.
Nötig sind lediglich die frontendseitigen Helper-Pakete:

* 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 unterstützt Precognition ab 2.3 direkt. Auch in Inertia 3 funktioniert es weiterhin.
  Bei Inertia-Formularen ist die zusätzliche Installation von `laravel-precognition-vue` bzw. `laravel-precognition-react` normalerweise nicht nötig.
</Info>

## Backend-Konfiguration

Fügen Sie der Route die Middleware `HandlePrecognitiveRequests` hinzu.
In der Praxis konzentrieren Sie die Validierungsregeln in einem Form-Request –
das erleichtert Wiederverwendung und trennt Zuständigkeiten klar.

```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) {
    // Wird nur bei einem regulären Submit ausgeführt
})->middleware([HandlePrecognitiveRequests::class]);
```

Falls eine eigene Middleware Seiteneffekte hat, überspringen Sie sie bei Precognition-Requests.

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

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

## Frontend-Integration

### 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 JavaScript mit Axios

Die Precognition-Bibliothek verwendet Axios.
Um eine bestehende Axios-Instanz zu nutzen, ersetzen Sie sie mit `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);
```

## Steuerung der Validierungs-Timings

Die Validierung eines einzelnen Feldes lösen Sie mit `validate()` aus.

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

Die Debounce-Zeit passen Sie über `setValidationTimeout()` an.

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

Sollen bei jeder Prüfung auch Dateien mitvalidiert werden, verwenden Sie `validateFiles()`.

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

Für Array-Eingaben nutzen Sie eine Wildcard.

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

## Formular-Helfer

`useForm()` bündelt Übermittlungs- und Fehlerstatus.

* `validating`: Eine Validierungsanfrage läuft
* `processing`: Ein Submit ist in Bearbeitung
* `errors`: Liste der Fehler
* `valid('field')` / `invalid('field')`: Validierungsstatus des Feldes
* `submit()`: Regulärer Submit

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

## Vergleich: Normale und Precognition-Requests

Das folgende Diagramm zeigt den Unterschied im Ablauf.

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

    User->>Frontend: Formular ausfüllen
    Frontend->>Server: Precognition-Request (Header Precognition: true)
    Server->>Server: Validierung ausführen (Controller-Logik NICHT)
    Server-->>Frontend: Validierungsergebnis
    Frontend-->>User: Fehleranzeige in Echtzeit
    User->>Frontend: Formular abschicken
    Frontend->>Server: Regulärer Request
    Server-->>Frontend: Response
```

## Weiterführende Links

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