Precognition

Giới thiệu (Introduction)

Laravel Precognition cho phép bạn "nhìn trước" (anticipate) kết quả HTTP request tương lai. Ứng dụng chính là cung cấp live validation cho frontend mà không cần duplicate validation rules.

Khi "precognitive" request được gửi, Laravel thực thi tất cả middleware và validation của route, nhưng không thực sự thực thi route handler — trả về validation response ngay lập tức.

Cài đặt

Server Side

composer require laravel/precognition

Client Side

npm install laravel-precognition-vue     # Vue
npm install laravel-precognition-react   # React
npm install laravel-precognition-alpine  # Alpine

Live Validation

Alpine.js

<form x-data="{
    form: $form('post', '/users', {
        username: '',
        email: '',
    }),
}">
    <label for="username">Username</label>
    <input
        id="username"
        type="text"
        x-model="form.username"
        @change="form.validate('username')"
    />
    <template x-if="form.invalid('username')">
        <div x-text="form.errors.username"></div>
    </template>
</form>

Vue

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

const form = useForm('post', '/users', {
    username: '',
    email: '',
});

const submit = () => form.submit();
</script>

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

React

import { useForm } from 'laravel-precognition-react';

export default function Form() {
    const form = useForm('post', '/users', {
        username: '',
        email: '',
    });

    const submit = (e) => {
        e.preventDefault();
        form.submit();
    };

    return (
        <form onSubmit={submit}>
            <label htmlFor="username">Username</label>
            <input
                id="username"
                value={form.data.username}
                onChange={(e) => form.setData('username', e.target.value)}
                onBlur={() => form.validate('username')}
            />
            {form.invalid('username') && (
                <div>{form.errors.username}</div>
            )}
        </form>
    );
}

Middleware

Áp dụng middleware HandlePrecognitiveRequests:

use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;

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

Tùy chỉnh Validation Rules

Bạn có thể tùy chỉnh rules cho precognitive requests:

use Illuminate\Http\Request;

public function store(Request $request)
{
    $request->validate([
        'username' => ['required', 'unique:users'],
        'email' => ['required', 'email'],
    ]);

    // Chỉ chạy khi KHÔNG phải precognitive request...
    if (! $request->isPrecognitive()) {
        // Business logic...
    }
}