Laravel Livewire Real Time Validation Using Lifecycle Hooks

In this tutorial, we will see real time validation using laravel livewire with livewire lifecycle hooks. Lifecycle hooks allow you to run code at any part of the component's lifecyle, or before specific properties are updated. It is work like little SPA, that why livewire hooks is very useful. For this section we will use updated hooks for real time validation. let start...

Create Post Form Component

First you need to create livewire component. Then you need create public property, After use $rules for validation. Next use another hook mount.

mount: It runs once, immediately after the component is instantiated, but before render() is called.

Next, step you need to create store method, just pass $this->validate(); and save & rest. In final step you need to create updated hooks.

updated: It runs after any update to the Livewire component's data (Using wire:model).

app/Http/Livewire/PostForm

<?php

namespace App\Http\Livewire;

use App\Models\Post;
use Livewire\Component;

class PostForm extends Component
{
    public $title;
    public $description;
    public $auther_number;
    public Post $post;

    protected $rules = [
        'post.title' => 'required|min:8',
        'post.auther_number' => 'required|numeric|min:10',
        'post.description' => 'required|max:500',
    ];

    public function mount()
    {
        $this->post = $post ?? new Post();
    }

    public function storePost()
    {
        $this->validate();
 
        $this->post->save();

        $this->reset();
    }

    public function updated($name)
    {
        $this->validateOnly($name, [
            'post.title' => 'required|min:8',
            'post.auther_number' => 'required|numeric|min:10',
        ]);
    }

    public function render()
    {
        return view('livewire.post-form');
    }
}

Data Bind with Form

Next, step you need to create form and data bind using wire:model and call storePost method for save form. do not forget to show @error message otherwise validation error will not show.

resources/views/livewire/post-form.blade.php

<div>
    <div class="container mx-auto">
        <form method="POST" wire:submit.prevent="storePost">
            @csrf
            <div>
                <label for="title">Title</label>
                <input type="text" wire:model.lazy="post.title"
                class="w-full py-2 rounded">
                @error('post.title')
                <span class="text-red-600">{{ $message }}</span>
                @enderror
            </div>
            <div class="mt-8">
                <label for="auther_number">Auther Number</label>
                <input type="text" wire:model.lazy="post.auther_number" 
                class="w-full py-2 rounded">
                @error('post.auther_number')
                <span class="text-red-600">{{ $message }}</span>
                @enderror
            </div>
            <div class="mt-8">
                <label class="block mb-2 text-xl">Description </label>
                <textarea wire:model.lazy="post.description" rows="3" cols="20" 
                class="w-full rounded">
            </textarea>
                @error('post.description')
                <span class="text-red-600">{{ $message }}</span>
                @enderror
            </div>
            <button type="submit" 
                    class="px-4 py-2 mt-4 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700">
                Submit
            </button>
        </form>
    </div>
</div>

Laravel Livewire Real Time Validation Using Lifecycle Hooks