Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124


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 :

real time validation in livewire
real time validation using #[Rule] attributes in Livewire

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 to instruct Livewire to trigger network requests as the fields are filled out.

In the below example, 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:

<form wire:submit.prevent="handleSignup" autocomplete="off">
   <input class="form-control @error('first_name') is-invalid @enderror" type="text""first_name" placeholder="First name" />
   <span class="text-danger">{{ $message }}</span>
   <input class="form-control @error('last_name') is-invalid @enderror" type="text""last_name" placeholder="Last name" />
   <span class="text-danger">{{ $message }}</span>
   <input class="form-control @error('email') is-invalid @enderror" type="email""email" placeholder="Email" />
   <span class="text-danger">{{ $message }}</span>
   <input class="form-control @error('phone_number') is-invalid @enderror" type="text""phone_number" placeholder="Phone number" />
   <span class="text-danger">{{ $message }}</span>
   <input class="form-control @error('password') is-invalid @enderror" type="password""password" placeholder="Password" />
   <span class="text-danger">{{ $message }}</span>
   <div class="position-relative">
      <input class="form-control @error('confirmPassword') is-invalid @enderror type="password""confirmPassword"
         placeholder="Re enter Password" />
      <span class="text-danger">{{ $message }}</span>
   <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>

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
    public $first_name = '';

    public $last_name = '';

    public $email = '';

    public $phone_number = '';

    public $password = '';

    public $confirmPassword = '';

    protected $token=NULL;

    public function handleSignup()
        $validated = $this->validate();
        session()->flash('status', 'You are registered successfully.');
        catch(\Exception $e){
        throw $e;

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

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.