Laravel 8 Tutorial - Livewire Form Validation

In this tutorial, we are going to learn about Livewire Form Validation.

So, let's see how we can validate a form in Livewire.

First of all, let's create a Livewire component. So, switch to the command prompt and run the command to create a Livewire component:

php artisan make:livewire Contact

Now, run the application:

php artisan serve

Now, switch to the project and let's create the route for this contact component. So, just go inside the routes directory, then open the web.php file, and create the route:

Route::get('/contact',Contact::class);

Now, just go inside the resources directory, then views, then layouts, and open the app.blade.php file. This is the component's default layout file, and here, let's add the Bootstrap CDN.

For that, just go to the getbootstrap.com website, click on "Get started", and from here, just copy the CSS and JS CDN links. Then, paste them inside the app.blade.php file.

Now, just open the contact.blade.php view file, and here, let's create a form:

<div>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            Contact Form
                        </div>
                        <div class="card-body">
                            <form wire:submit.prevent="submitForm">
                                <div class="form-group">
                                    <lable for="name">Name</lable>
                                    <input type="text" name="name" class="form-control" wire:model="name" />
                                    @error('name') <p class="text-danger">{{$message}}</p> @enderror
                                </div>

                                <div class="form-group">
                                    <lable for="email">Email</lable>
                                    <input type="email" name="email" class="form-control" wire:model="email" />
                                    @error('email') <p class="text-danger">{{$message}}</p> @enderror
                                </div>

                                <div class="form-group">
                                    <lable for="phone">Phone</lable>
                                    <input type="text" name="phone" class="form-control" wire:model="phone" />
                                    @error('phone') <p class="text-danger">{{$message}}</p> @enderror
                                </div>

                                <div class="form-group">
                                    <lable for="msg">Message</lable>
                                    <input type="text" name="msg" class="form-control" wire:model="msg" />
                                    @error('message') <p class="text-danger">{{$message}}</p> @enderror
                                </div>
                                <button type="submit" class="btn btn-success">Submit</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

Now, let's open the Contact.php component class file, and write the following code:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Contact extends Component
{
    public $name;
    public $email;
    public $phone;
    public $msg;

    public function updated($fields)
    {
        $this->validateOnly($fields,[
            'name' => 'required',
            'email' => 'required|email',
            'phone' => 'required|digits:10',
            'msg' => 'required|min:20'
        ]);
    }
    public function submitForm()
    {
        $this->validate([
            'name' => 'required',
            'email' => 'required|email',
            'phone' => 'required|digits:10',
            'msg' => 'required|min:20'
        ]);

        dd($this->name,$this->email,$this->phone,$this->msg);
    }
}

Now, it's done, so let's check it. So, switch to the browser, and go to the URL /contact.

And here, you can see the contact form. Now, just click on submit.

And here, you can see the validation error. Now, just enter the name.

And if you enter an invalid email ID, the validation error will show "Enter a valid email ID".

Now, just enter a valid email ID.

Now, in this phone input field, just enter any character. It will show "Just enter 10 digits, not characters".

So, just enter a valid phone number.

Now, enter the message. If you enter text less than 20 characters, it will show a validation error.

Now, enter at least 20 characters.

Now, there is no validation error. Now, click on submit.

You can see that the form has been submitted successfully.

So, in this way, we can validate a Livewire form.