Component Class

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\DummyUser;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;

class CheckUsernameAvailability extends Component
{
    public $model;
    public string $name = '';
    public string $email = '';
    public string $username = '';
    public string $password = '';
    public string $password_confirmation = '';

    protected $rules = [
        'username' => ['required', 'unique:dummy_users,username'],
        'name' => ['required', 'string'],
        'email' => ['required', 'email', 'unique:dummy_users,email'],
        'password' => ['required', 'string', 'confirmed'],
    ];

    protected $messages = [
        'username.unique' => 'This username has already been taken!',
    ];

    public function mount()
    {
        $this->model = DummyUser::class;
        request()->session()->forget('valid-username');
    }

    public function render()
    {
        return view('livewire.check-username-availability');
    }

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

        // $user = DummyUser::create([
        //     'name' => $this->name,
        //     'email' => $this->email,
        //     'username' => $this->username,
        //     'password' => Hash::make($this->password),
        // ]);

        $this->reset();
        request()->session()->forget('valid-username');

        session()->flash('success', 'New User created successfully');
    }

    public function updatedUsername()
    {
        request()->session()->forget('valid-username');

        $validated = $this->validateOnly('username');

        //Valid username
        if(!empty($validated)){
            session(['valid-username' => 'Username is available']);
        }
    }
}

Component View File

<div class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-10 col-lg-8 text-center">
                <!-- Heading -->
                <h2 class="fw-bold blue-heading">
                    Create New Account (Username checker Demo)
                </h2>
            </div>
        </div> <!-- / .row -->
        <div class="row justify-content-md-center">
            <div class="col-10">
                @include('partials.alerts')
            </div>
        </div>

        <form wire:submit.prevent="submit">
            <div class="row justify-content-md-center">
                <div class="col-10 col-md-10">
                    <div class="form-group mb-3">
                        <!-- Label -->
                        <label class="form-label" for="title">
                            Name
                        </label>
                        <!-- Input -->
                        <input class="form-control @error('name') is-invalid @enderror" id="name" type="text"
                            placeholder="Enter your name" wire:model.lazy="name" autofocus autocomplete="off">
                            @error('name')
                                <div id="invalidusernameFeedback" class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                    </div>
                    <div class="form-group mb-3">
                        <!-- Label -->
                        <label class="form-label" for="title">
                            Username
                        </label>
                        <!-- Input -->
                        <input class="form-control @error('username') is-invalid @enderror @if(session('valid-username')) is-valid @endif" id="username" type="text"
                            placeholder="Pick a username" wire:model.lazy="username" autofocus autocomplete="off">
                        @error('username')
                            <div id="invalidusernameFeedback" class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                        @if(session()->has('valid-username'))
                            <div class="valid-feedback">
                                {{ session('valid-username') }}
                            </div>
                        @endif
                    </div>
                    <div class="form-group mb-3">
                        <!-- Label -->
                        <label class="form-label" for="title">
                            Email
                        </label>
                        <!-- Input -->
                        <input class="form-control @error('email') is-invalid @enderror" id="email" type="text"
                            placeholder="Enter email" wire:model.lazy="email" autofocus autocomplete="off">
                        @error('email')
                            <div id="invalidusernameFeedback" class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    <div class="form-group mb-3">
                        <!-- Label -->
                        <label class="form-label" for="title">
                            Password
                        </label>
                        <!-- Input -->
                        <input class="form-control @error('password') is-invalid @enderror" id="password" type="password"
                            placeholder="Enter password" wire:model.lazy="password" autofocus autocomplete="off">
                        @error('password')
                            <div id="invalidusernameFeedback" class="invalid-feedback">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    <div class="form-group mb-3">
                        <!-- Label -->
                        <label class="form-label" for="title">
                            Confirm Password
                        </label>
                        <!-- Input -->
                        <input class="form-control @error('password') is-invalid @enderror" id="password" type="password"
                            placeholder="Enter password" wire:model.lazy="password_confirmation" autofocus autocomplete="off">
                    </div>
                </div>
            </div> <!-- / .row -->

            <div class="row justify-content-center">
                <div class="col-auto">
                    <!-- Submit -->
                    <button type="submit" class="btn btn-primary text-white lift">
                        Submit
                    </button>
                </div>
            </div> <!-- / .row -->
        </form>
    </div>
</div>

Usage

@livewire('check-username-availability')

Documentation

We have used the updated lifecycle hook livewire to check if the username already exists in the database. Laravel validation provides a unique validator which helps us check this. If the username already exists the validation method adds a message into the error messagebag. If not we add a success message into the session.