Membuat Validasi Real Time dengan Laravel Precognition

Pada Laravel 10 terdapat sebuah fitur baru yang bernama Laravel Precognition yang dimana fitur ini akan membantu kita agar mudah menerapkan validasi secara real time. Dengan Laravel Precognition kita tidak perlu mengimplementasikan rules validasi yang ada di backend ke frontend.

Nah Live Validation / Real Time Validation ini tersedia untuk Vue, Vue & Inertia, React, React & Inertia, Alpine & Blade.

Lalu bagaimana untuk implementasinya ? mari kita coba dengan studi kasus yang bisa kita setup dengan cepat.

Setup Proyek Laravel & Laravel Breeze

Pertama, instal Laravel.

laravel new precognition

Kedua, download Laravel Breeze ke dalam proyek kita.

composer require laravel/breeze --dev

Setelah berhasil download Laravel Breeze, selanjutnya jalankan perintah untuk membuat starter kit, kali ini kita akan gunakan Vue & Inertia.

php artisan breeze:install vue

Jangan lupa buat dan seting database, kemudian jalankan migrationnya.

php artisan migrate

Jalankan aplikasinya.

php artisan serve

Kemudian kita akan coba buka http://localhost:8000/register kemudian daftarkan sebuah email -> log out, lalu kita coba untuk daftar dengan email yang sama.

Validasi ini akan muncul ketika kita klik tombol Register, nah mari kita buat supaya validasinya real time.

Implementasi Precognition

Untuk mengimplementasikan Precognition, kita perlu menambahkan sebuah middleware ke dalam route kita. Dalam contoh ini kita akan menggunakan route register pada file routes/auth.php.

use Illuminate\Foundation\Http\Middleware\HandlePrecognitiveRequests;

Route::post('register', [RegisteredUserController::class, 'store'])
        ->middleware([HandlePrecognitiveRequests::class]);

Kemudian kita perlu menginstal sebuah package untuk Precognition (sesuaikan dengan stack proyeknya).

npm install laravel-precognition-vue-inertia

Setelah itu buat sebuah class Form Request , karena Precognition harus menggunakan class Form Request untuk bisa bekerja.

php artisan make:request UserStoreRequest

Berikutnya, buka app/Http/Controllers/Auth/RegisteredUserController.php pada method store() ubah class Request pada type hint menjadi UserStoreRequest dan hapus validasi yang ada, karena akan kita implementasi pada app/Http/Controllers/Auth/RegisteredUserController.php.

use App\Http\Requests\UserStoreRequest;

public function store(UserStoreRequest $request): RedirectResponse
{
    $user = User::create([
        'name' => $request->name,
        'email' => $request->email,
        'password' => Hash::make($request->password),
    ]);

    event(new Registered($user));

    Auth::login($user);

    return redirect(RouteServiceProvider::HOME);
}

Kemudian pada file app/Http/Requests/UserStoreRequest.php sesuaikan seperti ini.

<?php

namespace App\Http\Requests;

use App\Models\User;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Validation\Rules\Password;

class UserStoreRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     */
    public function authorize(): bool
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array|string>
     */
    public function rules(): array
    {
        return [
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:'.User::class,
            'password' => ['required', 'confirmed', Password::defaults()],
        ];
    }
}

Selanjutnya, kita juga butuh menyesuaikan pada bagian frontend pada file resources/js/Pages/Auth/Register.vue

Pertama ubah penggunaan useForm dari awalnya menggunakan milik Inertia

import { Head, Link, useForm } from "@inertiajs/vue3";

Menjadi seperti ini, menggunakan dari Laravel Precognition.

import { Head, Link } from "@inertiajs/vue3";
import { useForm } from "laravel-precognition-vue-inertia";

Kemudian sesuaikan pada bagian form, karena ada perbedaan dari useForm bawaan Inertia dengan yang dimiliki Precognition.

const form = useForm("post", "/register", {
    name: "",
    email: "",
    password: "",
    password_confirmation: "",
});

Terakhir, tambahkan @change="form.validate('input-name')" pada setiap input yang ingin divalidasi, contoh pada input email.

<TextInput
    id="email"
    type="email"
    class="mt-1 block w-full"
    v-model="form.email"
    required
    autocomplete="username"
    @change="form.validate('email')"
/>

Oh ya jangan lupa untuk build ya supaya update aset-asetnya, untuk development sebaiknya jalankan selalu npm run dev untuk production npm run build.

Lalu coba ulangi mendaftar pada http://localhost:8000/register, dan sekarang validasinya akan muncul ketika berpindah input.

Sekian, semoga bermanfaat !