Inertia.js 2.3 : Le support natif de Precognition pour la validation en temps réel

Fini les packages supplémentaires pour la validation en temps réel ! Inertia.js 2.3 intègre Laravel Precognition directement dans le composant <Form> et le helper useForm(). Vos règles de validation backend sont désormais exploitables côté frontend sans duplication de code.

Qu’est-ce que Laravel Precognition ?

Laravel Precognition permet d’anticiper le résultat d’une requête HTTP future. Concrètement, lorsqu’une requête « précognitive » arrive, Laravel exécute les middlewares et valide les Form Requests — sans jamais exécuter le code du contrôleur.

Le principal cas d’usage : offrir une validation en direct sur vos formulaires frontend, en réutilisant exactement les mêmes règles définies côté serveur.

Avant Inertia 2.3, il fallait installer un package séparé (laravel-precognition-vue ou laravel-precognition-react). Cette nouvelle version supprime cette contrainte.

Configuration côté Laravel

Pour activer Precognition sur une route, ajoutez le middleware HandlePrecognitiveRequests :

<?php

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

// Activation de Precognition sur la route
Route::post('/users', function (StoreUserRequest $request) {
    // Logique de création de l'utilisateur
})->middleware([HandlePrecognitiveRequests::class]);

La Form Request contient vos règles de validation classiques :

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreUserRequest extends FormRequest
{
    /**
     * Règles de validation pour la création d'utilisateur
     */
    public function rules(): array
    {
        return [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'email', 'unique:users,email'],
            'password' => ['required', 'min:8', 'confirmed'],
        ];
    }
}

Utilisation avec le composant Form (Vue)

Le composant `

` d’Inertia 2.3 expose directement les méthodes Precognition via son slot par défaut : « `vue

Validation en cours…

Créer l’utilisateur

Le slot expose quatre propriétés essentielles :
- `errors` : objet contenant les messages d'erreur
- `invalid(field)` : vérifie si un champ est invalide
- `validate(field)` : déclenche la validation d'un champ
- `validating` : indique si une validation est en cours

## Utilisation avec useForm() et withPrecognition()

Pour les formulaires plus complexes, le helper `useForm()` s'enrichit de la méthode `withPrecognition()` :

```javascript
import { useForm } from '@inertiajs/vue3'

// Activation de Precognition sur le formulaire
const form = useForm({
  name: '',
  email: '',
  password: '',
}).withPrecognition('post', '/users')

// Validation d'un champ spécifique
const validateField = (field) => {
  form.validate(field)
}

// Soumission du formulaire
const submit = () => {
  form.submit()
}

L’appel à withPrecognition() prend deux paramètres : la méthode HTTP et l’URL cible. Ensuite, form.validate() déclenche une requête précognitive vers votre backend.

Méthodes valid() et invalid()

Ces deux méthodes permettent un affichage conditionnel précis de l’état de validation :

<script setup>
import { useForm } from '@inertiajs/vue3'

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

<template>

<div>
    <input 
      v-model="form.email" 
      @blur="form.validate('email')" 
    />

    <!-- Indicateur visuel de validation réussie -->
    <span v-if="form.valid('email')" class="text-green-500">✓</span>

    <!-- Indicateur visuel d'erreur -->
    <span v-if="form.invalid('email')" class="text-red-500">
      {{ form.errors.email }}
    </span>
  </div>
</template>

Un champ n’apparaît comme valide ou invalide qu’après modification et réception de la réponse de validation.

Personnalisation des règles côté backend

Vous pouvez adapter les règles selon le type de requête avec isPrecognitive() :

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Rules\Password;

class StoreUserRequest extends FormRequest
{
    public function rules(): array
    {
        return [
            'password' => [
                'required',
                // Validation légère pour Precognition, complète pour la soumission
                $this->isPrecognitive()
                    ? Password::min(8)
                    : Password::min(8)->uncompromised(),
            ],
        ];
    }
}

Cette approche évite des appels API lourds (comme la vérification de mot de passe compromis) lors de la validation en temps réel.

Points d’attention

• Debounce automatique : les requêtes de validation sont automatiquement « debouncées ». Configurez le délai avec form.setValidationTimeout(3000)
• Fichiers : par défaut, Precognition n’envoie pas les fichiers lors de la validation. Adaptez vos règles avec isPrecognitive()
• Side-effects : vérifiez que vos middlewares ne comptabilisent pas les requêtes précognitives (analytics, rate limiting…)
• Compatibilité : cette intégration native nécessite Inertia 2.3+. Les versions antérieures doivent utiliser les packages laravel-precognition-vue ou laravel-precognition-react

Tester les requêtes précognitives

Laravel fournit des helpers de test dédiés :

<?php

use App\Models\User;

it('valide le formulaire avec precognition', function () {
    $response = $this->withPrecognition()
        ->post('/users', [
            'name' => 'John Doe',
            'email' => 'john@example.com',
        ]);

    // Vérifie que la validation précognitive a réussi
    $response->assertSuccessfulPrecognition();

    // Confirme qu'aucun utilisateur n'a été créé
    expect(User::count())->toBe(0);
});

assertSuccessfulPrecognition() vérifie que la requête a passé la validation sans déclencher le code du contrôleur.

Résumé

Inertia.js 2.3 simplifie radicalement la validation de formulaires. Plus besoin de packages supplémentaires ni de duplication des règles. Le composant `

` et `useForm().withPrecognition()` offrent une API claire et cohérente. Les développeurs Laravel profitent enfin d’une expérience de validation unifiée entre backend et frontend. ## Ressources * [Documentation Inertia.js – Forms](https://inertiajs.com/docs/v2/the-basics/forms#precognition) * [Documentation Laravel Precognition](https://laravel.com/docs/12.x/precognition) * [Release GitHub v2.3.0](https://github.com/inertiajs/inertia/releases/tag/v2.3.0) * [Pull Request #2684 – useForm() Precognition](https://github.com/inertiajs/inertia/pull/2684) * [Pull Request #2700 – Form Component Precognition](https://github.com/inertiajs/inertia/pull/2700)