Real-time validation in Livewire 3

In this tutorial, I will give you an example of “real-time validation in Livewire 3,” so you can easily apply it to your Laravel 8, Laravel 9, and Laravel 10 applications.

First, what we’re doing here, This is the example :

Need Of Real-Time Validation in Livewire

Real-time validation is the term used when we validate a user’s input as they fill out a form rather than waiting for the form submission.

By using #[Rule] attributes directly on Livewire properties, any time a network request is sent to update a property’s value on the server, the provided validation rules will be applied.

This means that to provide a real-time validation experience for your users on a specific input, no extra backend work is required. The only thing that is required is using wire:model.blur or wire:model.live to instruct Livewire to trigger network requests as the fields are filled out.

In the below example, wire:model.live has been added to the text input. Now, when a user types in the field and then tabs or clicks away from the field, a network request will be triggered with the updated value, and the validation rules will run:

resources\views\livewire\auth\sign-up.blade.php

<form wire:submit.prevent="handleSignup" autocomplete="off">
   <input class="form-control @error('first_name') is-invalid @enderror" type="text" wire:model.live.debounce.150ms="first_name" placeholder="First name" />
   @error('first_name')
   <span class="text-danger">{{ $message }}</span>
   @enderror
   <input class="form-control @error('last_name') is-invalid @enderror" type="text" wire:model.live.debounce.150ms="last_name" placeholder="Last name" />
   @error('last_name')
   <span class="text-danger">{{ $message }}</span>
   @enderror
   <input class="form-control @error('email') is-invalid @enderror" type="email" wire:model.live.debounce.150ms="email" placeholder="Email" />
   @error('email')
   <span class="text-danger">{{ $message }}</span>
   @enderror
   <input class="form-control @error('phone_number') is-invalid @enderror" type="text" wire:model.live.debounce.150ms="phone_number" placeholder="Phone number" />
   @error('phone_number')
   <span class="text-danger">{{ $message }}</span>
   @enderror
   <input class="form-control @error('password') is-invalid @enderror" type="password" wire:model.live.debounce.150ms="password" placeholder="Password" />
   @error('password')
   <span class="text-danger">{{ $message }}</span>
   @enderror
   <div class="position-relative">
      <input class="form-control @error('confirmPassword') is-invalid @enderror type="password" wire:model.live.debounce.150ms="confirmPassword"
         placeholder="Re enter Password" />
      @error('confirmPassword')
      <span class="text-danger">{{ $message }}</span>
      @enderror
   </div>
   <button type="submit" class="btn primary-btn text-sm fw-bold w-100">
      Sign Up
      <div wire:loading class="spinner-border spinner-border-sm"></div>
   </button>
</form>

app\Livewire\Auth\SignUp.php

<?php

namespace App\Livewire\Auth;

use App\Models\User;
use Livewire\Attributes\Rule;
use DB;
use Illuminate\Support\Facades\Hash;
use Livewire\Component;

class SignUp extends Component
{
    #[Rule('required|min:5|max:50')]
    public $first_name = '';

    #[Rule('required|min:5|max:50')]
    public $last_name = '';

    #[Rule('required|unique:users|email|min:5|max:50')]
    public $email = '';

    #[Rule('required|regex:/^([0-9\s\-\+\(\)]*)$/|unique:users|min:5|max:12')]
    public $phone_number = '';

    #[Rule('required|min:5|max:15')]
    public $password = '';

    #[Rule('required|min:5|max:15|same:password')]
    public $confirmPassword = '';
 

    protected $token=NULL;

    public function handleSignup()
    {
        try{
            DB::beginTransaction();
        $validated = $this->validate();
        User::create($validated);
        DB::commit();
        session()->flash('status', 'You are registered successfully.');
        }
        catch(\Exception $e){
        DB::rollback();
        throw $e;
        }
        $this->reset();
    }

    public function render()
    {
        return view('livewire.auth.sign-up',['title' => 'SignUp'])->extends('layouts.front.app');
    }
}

I hope that this article helped you learn  How to use real-time validation in Livewire 3 in Laravel. You may also want to check out our guide on How to get the Next Previous record in Laravel Livewire.