ItSolutionStuff.com

In this example, we will create a ProductCreate Livewire component. The component will include a form with input fields for the product's name, price, and details. We'll implement form validation to ensure data integrity and display error messages for invalid inputs. Finally, we will store the submitted data into the database. Let's walk through the process of building this step-by-step form validation using Livewire.

Step 1: Create ProductCreate Component

Now here we will create a Livewire component using their command. So run the following command to create an add more component.

php artisan make:livewire ProductCreate

Now they created files on both paths:

app/Livewire/ProductCreate.php
   
resources/views/livewire/product-create.blade.php

Now, both files we will update as below for our contact us form.

app/Livewire/ProductCreate.php

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Product;

class ProductCreate extends Component
{
    public $name, $price, $detail;

    public function render()
    {
        return view('livewire.product-create');
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function submit()
    {
        $this->validate([
            "name" => "required",
            "price" => "requierd|min:5|numeric",
            "detail" => "required"
        ]);

        $product = Product::create([
            "name" => $this->name,
            "price" => $this->price,
            "detail" => $this->detail
        ]);

        info($product);
    }
}

resources/views/livewire/product-create.blade.php

<div>

    <form wire:submit="submit">
        
        <label>Name:</label>
        <input type="text" name="name" class="form-control" wire:model.change="name">
        @error("name")
        <p class="text-danger">{{ $message }}</p>
        @enderror

        <label>Price:</label>
        <input type="text" name="price" class="form-control" wire:model="price">
        @error("price")
        <p class="text-danger">{{ $message }}</p>
        @enderror

        <label class="mt-1">Detail:</label>
        <textarea class="form-control" wire:model="detail"></textarea>
        @error("detail")
        <p class="text-danger">{{ $message }}</p>
        @enderror

        <button class="btn btn-success mt-3" wire:loading.attr="disabled" type="submit">Submit</button>

    </form>
</div>

Step 2: Use Livewire Component

now, we will user counter component in home page. so you need to update home.blade.php file as the following way:

resources/views/home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Product Create') }}</div>

                <div class="card-body">
                    <livewire:product-create />
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Run Laravel:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/

Now, you need to register user and go to dashboard:

I hope it can help you...