Laravel 11 Livewire Form Validation Tutorial

by

In this tutorial, we will explore How to use Form Request in laravel using Laravel Livewire pacakge. Laravel 11 Livewire form validation provides an easy way to handle form submission requests. This is a powerful library for building dynamic web interfaces.

Step 1: Generate Migration and Model

Execute this command to create both a migration and model:

php artisan make:model Contact -m

Next, open the migration file located at database/migrations/xxxx_xx_xx_create_contacts_table.php and define the required fields:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up(): void
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->text('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down(): void
    {
        Schema::dropIfExists('contacts');
    }
}

Then, adjust the app/Models/Contact.php file to include the fillable properties:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    use HasFactory;

    protected $fillable = [
        'name', 'email', 'body',
    ];
}

Run the migration command to apply the changes to your database:

php artisan migrate

Step 2: Install Livewire

Install Livewire via Composer with the following command:

composer require livewire/livewire

Step 3: Create Livewire Component

Generate a new Livewire component for the form:

php artisan make:livewire ContactForm

Edit the app/Http/Livewire/ContactForm.php file to include validation logic:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Contact;

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

    public function submit()
    {
        $validatedData = $this->validate([
            'name' => 'required|min:6',
            'email' => 'required|email',
            'body' => 'required',
        ]);

        Contact::create($validatedData);

        return redirect()->route('form');
    }

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

Next, create the form view in resources/views/livewire/contact-form.blade.php:

<form wire:submit.prevent="submit">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" placeholder="Enter your name" wire:model="name">
        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
    </div>

    <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control" id="email" placeholder="Enter your email" wire:model="email">
        @error('email') <span class="text-danger">{{ $message }}</span> @enderror
    </div>

    <div class="form-group">
        <label for="body">Body</label>
        <textarea class="form-control" id="body" placeholder="Enter message" wire:model="body"></textarea>
        @error('body') <span class="text-danger">{{ $message }}</span> @enderror
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Step 4: Define Route

Add a route for the form in routes/web.php:

<?php

use Illuminate\Support\Facades\Route;

Route::get('/form', function () {
    return view('form');
})->name('form');

Step 5: Create View File

Create a view file named form.blade.php in resources/views and include the Livewire component:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Livewire Form Example</title>
    @livewireStyles
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>

<div class="container">
    <div class="card mt-5">
        <div class="card-header">
            Laravel 11 Livewire Form Example
        </div>
        <div class="card-body">
            @livewire('contact-form')
        </div>
    </div>
</div>

<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</body>
</html>

Step 6: Run and Test

Start the Laravel development server with:

php artisan serve

Navigate to http://localhost:8000/form in your browser to test the form.