Menambahkan Validasi Pada Form Livewire

Setelah berhasil menambahkan data melalui form, ada hal yang terlewatkan pada form yang sudah kita buat, yaitu validasi untuk data yang akan dimasukkan.

Pada Livewire 3 ini ada sedikit perbedaan untuk validasinya, walaupun kita tetap bisa menggunakan cara yang sudah ada sejak Livewire 2 seperti ini:

public function addBook()
{
	$this->validate([
        'title' => ['required'],
        'author' => ['required']
    ]); 

    Book::create([
        'title' => $this->title,
        'author' => $this->author,
    ]);

    $this->reset(['title', 'author']);

    $this->dispatch('book-created');
}

Baik, dengan seperti ini form kita sudah tidak bisa diisi dengan isian yang kosong, artinya validasinya sudah berhasil, tinggal kita tambahkan pada view agar pengguna mendapatkan feedback dari validasinya.

<div>
    <form action="" class="flex flex-col space-y-2" wire:submit.prevent="addBook">
        <input class="rounded-lg border border-gray-500 p-2" name="title" placeholder="Isi dengan judul buku"
            type="text" wire:model="title">
 			@error('title')
            {{ $message }}
        @enderror
        <input class="rounded-lg border border-gray-500 p-2" name="author" placeholder="Isi dengan penulis buku"
            type="text" wire:model="author">
			@error('author')
            {{ $message }}
        @enderror 
        <button class="rounded-lg bg-teal-500 p-2 text-white">Tambah</button>
    </form>
</div>

Ketika sudah ditambahkan maka akan ada pesan error dari validasinya seperti di bawah ini, untuk styling bisa disesuaikan sendiri ya :P

Nah, lalu apa perbedaannya untuk Livewire 3 ini? Jadi, untuk Livewire 3 ini validasi bisa dilakukan menggunakan atribut Validate.

<?php

namespace App\Livewire\Book\Components;

use App\Models\Book;
use Livewire\Attributes\Validate;
use Livewire\Component;

class BookForm extends Component
{
	#[Validate('required')] 
    public $title;

 	#[Validate('required')] 
    public $author;

    public function addBook()
    {
			$this->validate(); 

        Book::create([
            'title' => $this->title,
            'author' => $this->author,
        ]);

        $this->reset(['title', 'author']);

        $this->dispatch('book-created');
    }
}

Untuk validasi dengan atribut ini tidak mendukung object Rules dari validasi Laravel ya, untuk atribut ini juga bisa kustomisasi pesan error, mengganti nama atribut, mendefinisikan kapan validasi dijalankan, dll, selengkapnya bisa dibaca di Livewire Validation.

Berikutnya, kita akan tambahkan pagination pada aplikasi kita, tentunya paginationnya juga tanpa reload ya.