Check Username availability using Livewire
Bootstrap 5 Livewire
Demo
Create New Account (Username checker Demo)
This is a pro component. Get Livewiredemos pro access to view / download the component code.
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.