Step 1: Creating the Livewire Component
We’ll start by creating a new component for managing a simple user registration form:
php artisan make:livewire RegisterUser
This command will generate the following files:
app/Livewire/RegisterUser.php– The PHP class for the component logic.resources/views/livewire/register-user.blade.php– The Blade file for the form UI.
Step 2: Setting Up the Component Logic
Open the RegisterUser.php file and define the properties for your form fields:
<?php
namespace App\Livewire;
use Livewire\Component;
class RegisterUser extends Component
{
public $name;
public $email;
public $password;
protected $rules = [
'name' => 'required|min:3',
'email' => 'required|email',
'password' => 'required|min:6',
];
public function updated($propertyName)
{
$this->validateOnly($propertyName);
}
public function register()
{
$this->validate();
// Logic to register the user
// For example: User::create([...])
session()->flash('success', 'User registered successfully!');
// Reset the form fields
$this->reset(['name', 'email', 'password']);
}
public function render()
{
return view('livewire.register-user');
}
}
Key Points:
$rules: Defines the validation rules for the form fields.validateOnly($propertyName): Validates a single field in real-time when it is updated.register(): Validates all fields and handles form submission logic.reset(): Clears the form fields after successful submission.
Step 3: Building the Form UI
Open the register-user.blade.php file and create the form structure:
<div>
@if (session()->has('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
<form wire:submit.prevent="register">
<div>
<label for="name">Name</label>
<input type="text" id="name" wire:model="name">
@error('name') <span class="error">{{ $message }}</span> @enderror
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" wire:model="email">
@error('email') <span class="error">{{ $message }}</span> @enderror
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" wire:model="password">
@error('password') <span class="error">{{ $message }}</span> @enderror
</div>
<button type="submit">Register</button>
</form>
</div>
What’s Happening Here?
wire:model: Binds the input fields to the Livewire component properties.@error: Displays validation error messages dynamically.wire:submit.prevent: Prevents the default form submission and triggers theregister()method.
Step 4: Real-Time Validation
Real-time validation is achieved using the updated() method in the component. As users type in the fields, Livewire validates the input and updates the error messages dynamically without refreshing the page.
Example:
If the user enters an invalid email, the error message will be displayed immediately under the email input field.
Step 5: Handling Success Messages
In the register() method, we use Laravel’s session flash messages to notify users of successful registration. The message is displayed dynamically using:
@if (session()->has('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
This enhances the user experience by providing instant feedback.
Final Output
With the above setup, visiting the page with the RegisterUser component allows users to:
Enter their name, email, and password.
See real-time validation error messages if they leave fields empty or provide invalid input.
Successfully submit the form and see a success message.
Have the form fields cleared after successful submission.