Zum Hauptinhalt springen

​
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
npm install laravel-precognition-vue

npm install laravel-precognition-react

npm install laravel-precognition-alpine
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.

​
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. 
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. 
public function handle(Request $request, Closure $next): mixed
{
    if (! $request->isPrecognitive()) {
        Interaction::incrementFor($request->user());
    }

    return $next($request);
}

​
Frontend-Integration

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

​
Vanilla JavaScript mit Axios

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

​
Steuerung der Validierungs-Timings

Die Validierung eines einzelnen Feldes lösen Sie mit validate() aus. 
form.validate('email');
Die Debounce-Zeit passen Sie über setValidationTimeout() an. 
form.setValidationTimeout(3000);
Sollen bei jeder Prüfung auch Dateien mitvalidiert werden, verwenden Sie validateFiles(). 
form.validateFiles();
Für Array-Eingaben nutzen Sie eine Wildcard. 
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
const submit = () => form.submit()
    .then(() => form.reset());

​
Vergleich: Normale und Precognition-Requests

Das folgende Diagramm zeigt den Unterschied im Ablauf.
Zuletzt geändert am 13. Juli 2026