In this section we will see laravel 9 validation with tailwind css form. We will also see how to use laravel 9 validation in tailwind css form, show error message, tailwind form show error message with icon and title inside form and strong error message example with laravel 9 with Tailwind CSS.
Laravel 9 Validation Example
Create simple laravel 9 validation form.
public function store(Request $request)
{
$request->validate([
'title' => 'required|string|max:70',
'content' => 'required'
]);
Blog::create([
'title' => $request->title,
'content' => $request->content
]);
return redirect()->route('blogs.index');
}
laravel validation with form requests.
run below command to create blog request.
php artisan make:request BlogStoreRequest
validate data in blog request.
Requests/BlogStoreRequest.php
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class BlogStoreRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, mixed>
*/
public function rules()
{
return [
'title' => 'required|string|max:70',
'content' => 'required'
];
}
}
Import BlogStoreRequest in blog controller.
Controllers/BlogController.php
public function store(BlogStoreRequest $request)
{
$data = $request->validated();
Blog::create($data);
return redirect()->route('blogs.index');
}
Tailwind CSS Form Validation Using Laravel 9 Example
Example 1
laravel with tailwind css simple error message.
<form method="POST" action="{{ route('blogs.store') }}">
@csrf
<div class="mb-6">
<label class="block">
<span class="text-gray-700">Title</span>
<input type="text" name="title" class="block w-full mt-1 rounded-md" placeholder=""
value="{{old('title')}}" />
</label>
@error('title')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<div class="mb-6">
<label class="block">
<span class="text-gray-700">Content</span>
<textarea class="block w-full mt-1 rounded-md" name="content" rows="3">{{old('content')}}</textarea>
</label>
@error('content')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<button type="submit" class="text-white bg-blue-600 rounded text-sm px-5 py-2.5">Submit</button>
</form>
laravel 9 with tailwind css simple error message.
Example 2
laravel with tailwind css inside form error message.
<form method="POST" action="{{ route('blogs.store') }}">
@csrf
<div class="mb-6">
<label class="block">
<span class="text-gray-700">Title</span>
<input type="text" name="title"
class="block @error('title') border-red-500 @enderror w-full mt-1 rounded-md" placeholder=""
value="{{old('title')}}" />
</label>
@error('title')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<div class="mb-6">
<label class="block">
<span class="text-gray-700">Content</span>
<textarea class="block @error('content') border-red-500 @enderror w-full mt-1 rounded-md" name="content"
rows="3">{{old('content')}}</textarea>
</label>
@error('content')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<button type="submit" class="text-white bg-blue-600 rounded text-sm px-5 py-2.5">Submit</button>
</form>
laravel 9 with tailwind css inside form error message.
Example 3
laravel with tailwind css form error message with title and lable.
<form method="POST" action="{{ route('blogs.store') }}">
@csrf
<div class="mb-6">
<label class="block">
<span class="text-gray-700 @error('title') text-red-500 @enderror">Title</span>
<input type="text" name="title"
class="block @error('title') border-red-500 @enderror w-full mt-1 rounded-md" placeholder=""
value="{{old('title')}}" />
</label>
@error('title')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<div class="mb-6">
<label class="block">
<span class="text-gray-700 @error('content') text-red-500 @enderror">Content</span>
<textarea class="block @error('content') border-red-500 @enderror w-full mt-1 rounded-md" name="content"
rows="3">{{old('content')}}</textarea>
</label>
@error('content')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<button type="submit" class="text-white bg-blue-600 rounded text-sm px-5 py-2.5">Submit</button>
</form>
laravel 9 with tailwind css form error message with title and lable.
Example 4
laravel with tailwind css form error message with icon.
<form method="POST" action="{{ route('blogs.store') }}">
@csrf
<div class="mb-6">
<label class="block">
<span class="text-gray-700 @error('title') text-red-500 @enderror">Title</span>
<input type="text" name="title"
class="block @error('title') border-red-500 @enderror w-full mt-1 rounded-md" placeholder=""
value="{{old('title')}}" />
</label>
@error('title')
<div class="flex items-center text-sm text-red-600">
{{ $message }}
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
@enderror
</div>
<div class="mb-6">
<label class="block">
<span class="text-gray-700 @error('content') text-red-500 @enderror">Content</span>
<textarea class="block @error('content') border-red-500 @enderror w-full mt-1 rounded-md" name="content"
rows="3">{{old('content')}}</textarea>
</label>
@error('content')
<div class="flex items-center text-sm text-red-600">
{{ $message }}
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
@enderror
</div>
<button type="submit" class="text-white bg-blue-600 rounded text-sm px-5 py-2.5">Submit</button>
</form>
laravel 9 with tailwind css form error message with icon.
Example 5
laravel with tailwind css form error message with icon and background color.
<form method="POST" action="{{ route('blogs.store') }}">
@csrf
<div class="mb-6">
<label class="block">
<span class="text-gray-700 @error('title') text-red-500 @enderror">Title</span>
<input type="text" name="title"
class="block @error('title') border-red-500 bg-red-100 text-red-900 @enderror w-full mt-1 rounded-md"
placeholder="" value="{{old('title')}}" />
</label>
@error('title')
<div class="flex items-center text-sm text-red-600">
{{ $message }}
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
@enderror
</div>
<div class="mb-6">
<label class="block">
<span class="text-gray-700 @error('content') text-red-500 @enderror">Content</span>
<textarea
class="block @error('content') border-red-500 bg-red-100 text-red-900 @enderror w-full mt-1 rounded-md"
name="content" rows="3">{{old('content')}}</textarea>
</label>
@error('content')
<div class="flex items-center text-sm text-red-600">
{{ $message }}
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-600" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
@enderror
</div>
<button type="submit" class="text-white bg-blue-600 rounded text-sm px-5 py-2.5">Submit</button>
</form>
laravel with tailwind css form background color error message
Read Also
Laravel 9 Add Simple Sidebar with Tailwind CSS Example
How to Use Carousel Slider in Laravel 9 Example
Laravel 9 Posts with Tags Many to Many Relationships Example
Laravel 9 Insert Category in Posts CRUD Example
How to Use Ckeditor 5 in Laravel 9 Vite with Tailwind CSS
Laravel 9 Simple Image Upload in Ckeditor 5 Example
Laravel 9 Flash Message Timeout and Hide Message Example
Install & Setup Markdown Editor in Laravel 9
Nuxt 3 Data Fetching Using Laravel 9 Api Example
Laravel 9 Image Upload with Preview using Tailwind CSS & Alpine JS
Laravel 9 Backend Api Connect with Vue 3 Using Axios Example
Laravel 9 Authentication with Next js Example
Laravel 9 Sanctum Authentication with Nuxt JS Example
Laravel 9 Simple Search with Pagination Example
Laravel 9 Install Setup TALL(Tailwind, Alpinejs, Livewire) Admin Panel
How to Fix and Clean Code Style in laravel 9
Laravel 9 Image File Upload Example
3 Way to Create Slug in Laravel 9 without Package
How to Add Dark Mode in Laravel 9 with Tailwind CSS
