Laravel 11 Livewire Form Validation Tutorial

In laravel 11, livewire package allow users to create a component and use it with application.

Here are steps to build form and implement validation rules in it using livewire:

Step 1: Create Migration and Model

Run the following command to create migration and model file:

php artisan make:model contact -m

Edit database/migrations/contacts.php file and add the following fields in it:

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
return new class 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');
    }
};

Edit app/models/contact.php file, and add the following property in it:

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Contact extends Model
{
    use HasFactory;
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    protected $fillable = [
        'name', 'email', 'body'
    ];
}

Run migration command to create tables in database:

php artisan migration

Step 2: Set Up Livewire

Run the following command to install livewire:

composer require livewire/livewire

Step 3: Create Form Component

Run the following command to create form component:

php artisan make:livewire contact-form

Edit app/Livewire/ContactForm.php file and implement form validation logic in it:

<?php
  
namespace App\Livewire;
  
use Livewire\Component;
use App\Models\Contact;
  
class ContactForm extends Component
{
    public $name;
    public $email;
    public $body;
  	  
  	/**
     * Write code on Method
     *
     * @return response()
     */
    public function submit()
    {
        $validatedData = $this->validate([
            'name' => 'required|min:6',
            'email' => 'required|email',
            'body' => 'required',
        ]);
  
        Contact::create($validatedData);
  
        return redirect()->to('/form');
    }
   
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.contact-form');
    }
}

Edit resources/views/livewire/contact-form.blade.php and create form with validation messages in it:

<form wire:submit.prevent="submit">
    <div class="form-group">
        <label for="exampleInputName">Name</label>
        <input type="text" class="form-control" id="exampleInputName" placeholder="Enter name" wire:model="name">
        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
  
    <div class="form-group">
        <label for="exampleInputEmail">Email</label>
        <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter name" wire:model="email">
        @error('email') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
  
    <div class="form-group">
        <label for="exampleInputbody">Body</label>
        <textarea class="form-control" id="exampleInputbody" placeholder="Enter Body" wire:model="body"></textarea>
        @error('body') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
  
    <button type="submit" class="btn btn-primary">Save Contact</button>
</form>

Step 4: Create Route

In routes/web.php file, create routes for form:

<?php

use Illuminate\Support\Facades\Route;

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

Step 5: Create View File

Create a view file named form.blade.php in resources/views directory, and import livewire form component in it:

<!DOCTYPE html>
<html>
<head>
    <title> Laravel 11 Livewire Form Submit and Validation Tutorial - ItcodStuff.com</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 Submit Example - ItcodStuff.com
      </div>
      <div class="card-body">
        @livewire('contact-form')
      </div>
    </div>
      
</div>
  
</body>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</html>

Step 6: Test Application

Run the following command to start laravel application server:

php artisan serve

Enter http://localhost:8000/form url on browser for testing.