Livewire 3: Real-time Validation e User Experience

Introduzione alla Validazione Real-time

Livewire 3 offre potenti strumenti per validare i form in tempo reale, fornendo feedback immediato agli utenti mentre digitano.

Validazione Base

Ecco come implementare una validazione semplice:

<?php
namespace App\Livewire;

use Livewire\Component;

class ContactForm extends Component
{
    public $name = '';
    public $email = '';
    public $message = '';

    protected $rules = [
        'name' => 'required|min:3',
        'email' => 'required|email',
        'message' => 'required|min:10',
    ];

    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

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

        // Salva i dati...

        session()->flash('message', 'Messaggio inviato con successo!');
        $this->reset();
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}
?>

Template Blade con Errori

Il template corrispondente con messaggi di errore:

<div>
    <form wire:submit="submit">
        <div class="mb-4">
            <label for="name">Nome</label>
            <input
                type="text"
                id="name"
                wire:model.live="name"
                class="@error('name') border-red-500 @enderror"
            >
            @error('name')
                <span class="text-red-500">{{ $message }}</span>
            @enderror
        </div>

        <div class="mb-4">
            <label for="email">Email</label>
            <input
                type="email"
                id="email"
                wire:model.live="email"
                class="@error('email') border-red-500 @enderror"
            >
            @error('email')
                <span class="text-red-500">{{ $message }}</span>
            @enderror
        </div>

        <div class="mb-4">
            <label for="message">Messaggio</label>
            <textarea
                id="message"
                wire:model.live="message"
                class="@error('message') border-red-500 @enderror"
            ></textarea>
            @error('message')
                <span class="text-red-500">{{ $message }}</span>
            @enderror
        </div>

        <button type="submit">Invia</button>
    </form>
</div>

Validazione Asincrona Personalizzata

Per validazioni più complesse che richiedono query al database:

<?php
use Illuminate\Validation\Rule;

class UserRegistration extends Component
{
    public $username = '';
    public $email = '';

    public function rules()
    {
        return [
            'username' => [
                'required',
                'min:3',
                'max:20',
                'alpha_dash',
                Rule::unique('users', 'username'),
            ],
            'email' => [
                'required',
                'email',
                Rule::unique('users', 'email'),
            ],
        ];
    }

    public function messages()
    {
        return [
            'username.unique' => 'Questo username è già in uso.',
            'email.unique' => 'Questa email è già registrata.',
        ];
    }
}
?>