Laravel 9 with Tailwind CSS Form Validation Example

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.

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.

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.

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.

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

laravel with tailwind css form background color error message