Check if username exists in the database without refresh
UI Stack: Bootstrap 5
@livewire('check-username-availability')
We have used the updated lifecycle hook Livewire to check if the username exists in the database.
Laravel validation provides a unique validator that helps us check this. If the username already exists the validation method adds a message to the error message bag. If not we add a success message to the session.
Real Time validate a form field as a user types into it
UI Stack: Bootstrap 5
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\DummyTask;
class RealTimeValidationExample extends Component
{
public string $title = '';
public string $description = '';
protected $rules = [
'title' => ['required', 'min:3'],
'description' => ['required', 'min:20'],
];
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function render()
{
return view('livewire.real-time-validation-example');
}
public function submit()
{
$this->validate();
DummyTask::create([
'title' => $this->title,
'description' => $this->description,
]);
$this->reset(['title', 'description']);
session()->flash('success', 'Task created successfully');
}
}
<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">
Realtime Validation Example Component
</h2>
</div>
</div> <!-- / .row -->
<div class="row justify-content-md-center">
<div class="col-12">
@include('partials.alerts')
</div>
</div>
<form wire:submit.prevent="submit">
<div class="row justify-content-md-center">
<div class="col-12 col-md-12">
<div class="form-group mb-3">
<!-- Label -->
<label class="form-label" for="title">
Title
</label>
<!-- Input -->
<input class="form-control @error('title') is-invalid @enderror" id="title" type="text"
placeholder="Enter Title" wire:model.lazy="title">
@error('title')
<div id="invalidTitleFeedback" class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
</div>
</div> <!-- / .row -->
<div class="row">
<div class="col-12">
<div class="form-group mb-5">
<!-- Label -->
<label class="form-label" for="description">Description</label>
<!-- Input -->
<textarea class="form-control @error('description') is-invalid @enderror" id="description" rows="5"
placeholder="Enter Description" spellcheck="false" data-gramm="false"
wire:model.lazy="description"></textarea>
@error('description')
<div id="invalidDescriptionFeedback" class="invalid-feedback">
{{ $message }}
</div>
@enderror
</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 -->
<div class="my-3 text-gray-600">
Test out real time validation by typing less than 3 characters in title field, or less than 20 characters in description field. Moving to another field should trigger an error message.
</div>
</form>
</div>
</div>
@livewire('real-time-validation-example')
$this->validateOnly() method. To validate an input field after every update, we can use Livewire's updated hook.
| Name | Slug |
|---|---|
| Task 5 | |
| Task 4 | |
| Task 3 | |
| Task 2 | |
| Task 1 |
@livewire('slug-generator')
This is an auto slug generator, that generates a slug that can be used to make SEO-friendly URLs.
Implementation is done using the updated lifecycle hook of Livewire. Whenever the user types into the title field it invokes the updatedTitle method and in there we use Laravel's String helper method to generate the slug.
Along with validation, sends email to recipient on submission.
UI Stack: Bootstrap 5
Use this form to request a new component, submit your component ( provide github url ) or just say Hi !
@livewire('contact-component')
This contact component lets users fill out the contact form and when the form is submitted it sends an email to the recipient along with all the contact information.
The Class component contains three fields to store the name, email, and contact message. Once the form is filled and submitted. Fields are validated using Livewire's inbuilt rules property.
Once validation succeeds, Mail::send function is used to send an email to the admin.
ContactMail Mail class is used to send the email to the user.
This in turn sends the content of the blade file contact email which is in the emails directory
Contact from enquery from: {{ $contactName }}
Name: {{ $contactName }}
Email: {{ $contactEmail }}
Message: {{ $contactMessage }}
That's how easy it is to implement a contact component using Livewire.