Form Validation Laravel Livewire 3 | EP 2
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...
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- Laravel 11 Livewire Wizard Multi Step Form Tutorial
- Laravel 11 Livewire Pagination Tutorial Example
- Laravel 11 Livewire Form Validation Example
- Laravel 11 Livewire CRUD using Jetstream & Tailwind CSS
- Laravel 9 Livewire Pagination Example Tutorial
- Laravel Livewire Click Event Example
- Laravel Livewire Dependant Dropdown Example
- Laravel Livewire Select2 Dropdown Example
- Laravel Livewire Load More OnScroll Example
- Laravel Livewire Image Upload Example
- Laravel Livewire Pagination Example
- Laravel Livewire File Upload Tutorial