Laravel Precognition Updates Are Here

Laravel Precognition was overhauled and ships with a fresh perspective on predicting the outcome of a future HTTP request. The Laravel team has taken the original version and polished it to streamline front-end and server-side validation with popular front-end tools:

Laravel Precognition is ready to predict the future! 🧠

Easily add real-time validation to your JS + Inertia powered Laravel apps without duplicating your validation logic on the front-end.

If you're using Livewire this is already easy for you. 😛https://t.co/QSa2RT7bsq pic.twitter.com/td49eDUReQ

— Taylor Otwell 🪐 (@taylorotwell) May 23, 2023

The Precognition docs have instructions for using Precognition with Vue, React , Vue + Inertia.js, and React + Inertia.js to streamline validation. Regardless of the front-end technology you use, routes that tap into Precognition only need to provide the framework-provided middleware:

use App\Http\Requests\CreateUserRequest;
use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;

Route::post('/users', function (CreateUserRequest $request) {
    // ...
})->middleware([HandlePrecognitiveRequests::class]);

Depending on your front-end technology, installing the accompanying NPM module makes validation with Precognition a breeze. For example, the following is a form component with precognition validation using the laravel-precognition-vue module:

<script setup>
import { useForm } from 'laravel-precognition-vue';

const form = useForm('post', '/users', {
    name: '',
    email: '',
});
const submit = () => form.submit();
</script>

<template>
    <form @submit.prevent="submit">
        <label for="name">Name</label>
        <input
            id="name"
            v-model="form.name"
            @change="form.validate('name')"
        />
        <div v-if="form.invalid('name')">
            {{ form.errors.name }}
        </div>

        <label for="email">Email</label>
        <input
            id="email"
            type="email"
            v-model="form.email"
            @change="form.validate('email')"
        />
        <div v-if="form.invalid('email')">
            {{ form.errors.email }}
        </div>

        <button>Create User</button>
    </form>
</template>

As the user fills out the form, Precognition will handle live validation output powered by Laravel validation rules on the server-side form request.

The front-end also has some useful methods to determine the validation of fields and general things about validation:

form.hasErrors();
form.valid('email');
form.invalid('email');
form.validating;
form.submit()
    .then(response => {
        form.reset();
        // ...
    })
    .catch(error => {
        // ...
    });

Check out the documentation for other features like $request->isPrecognative() in the server-side form request, which you can use to manage side effects and adjust validation rules.