PLATFORM

Tails

Create websites with TailwindCSS
Wave

Start building the next great SAAS
Pines

Alpine & Tailwind UI Library
Auth

Plug'n Play Authentication for Laravel
Designer comingsoon

Create website designs with AI
DevBlog comingsoon

Blog platform for developers
Static

Build a simple static website
SaaS Adventure

21-day program to build a SAAS

COMMUNITY

Laravel Livewire - Real-time Validation

class ContactForm extends Component
{
    public $name;
    public $email;

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

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

    public function saveContact()
    {
        $validatedData = $this->validate();

        Contact::create($validatedData);
    }
}

Livewire allows you to create simple validation by specifying a $rules protected array. You can then view the errors and submit the contact form with the code below:

<form wire:submit.prevent="saveContact">
    <input type="text" wire:model="name">
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="text" wire:model="email">
    @error('email') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Save Contact</button>
</form>

BETA Snippet explanation automatically generated by OpenAI:

Here is what the above code is doing:
1. We are creating a new class called ContactForm
2. We are extending the FormRequest class
3. We are creating our constructor method and passing in the name of the form and the rules
4. We are creating our updated method which will be used for validating the

Snippet By Tony Lea

Created June 22nd, 2021

Report Snippet

Source: https://laravel-livewire.com/docs/2.x/input-validation#real-time-validation