We are going to discuss and show you a few examples of using Tailwind CSS validation form in Laravel 9. We will show error message with various styles, Tailwind CSS error message with icon.
Tailwind is another CSS framework which more modern and fast build, I have wrote article about Tailwind and how to install with Laravel project as well.
Fist you have to download Laravel project in you computer. Read this to know how to install Laravel project with database, and in this example I will make to shorten the steps to do by skip migrations and model connect with database.
To use Tailwind you have to install in your Laravel project. There are various way to install in Laravel. I have an article to implement with full guide, hope you choose better option.
We will make validation in controller file, so let's type the command to generate file
php artisan make:controller PostController
Then update following code in path as below
Open file app -> Http -> Controllers -> PostController.blade.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
class PostController extends Controller
{
public function store(Request $request)
{
$request->validate([
'title' => 'required|string|max:100',
'content' => 'required'
]);
$post = new Post;
$post->title = $request->title;
$post->body = $request->body;
$post->save();
return redirect()->route('post.store');
}
/**
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('create');
}
}
Add the following code to web.php to tell Laravel where URL should point to controller. We will have two routes link
Open file routes -> web.php
<?php
use App\Http\Controllers\PostController;
Route::get('/', [PostController ::class, 'create']);
Route::post('/store', [PostController ::class, 'store'])->name('post.store');
We are going to create a blade file to design. We will show you different error validation with Tailwind.
Create file resources -> views -> create.blade.php
Example #1 - Tailwind simple error message
<form method="POST" action="{{ route('post.store') }}">
@csrf
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div class="px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
<div class="w-full max-w-xs">
<form class="mb-4 rounded bg-white px-8 pt-6 pb-8 shadow-md">
<div class="mb-4">
<label class="mb-2 block text-sm font-bold text-gray-700"> Title </label>
<input class="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" type="text" value="{{old('title')}}" />
@error('title')
<p class="text-sm text-red-600">{{ $errors->first('email') }}</div>
@enderror
</p>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700"> Body </label>
<input class="focus:shadow-outline mb-3 w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" type="text" value="{{old('body')}}" />
@error('body')
<p class="text-sm italic text-red-600">{{ $errors->first('body') }}</p>
@enderror
</div>
<div class="flex items-center justify-between">
<button class="focus:shadow-outline rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none" type="button">Submit</button>
</div>
</form>
</div>
</div>
</div>
</form>
Example #2 - Tailwind with border error
<form method="POST" action="{{ route('post.store') }}">
@csrf
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div class="px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
<div class="w-full max-w-xs">
<form class="mb-4 rounded bg-white px-8 pt-6 pb-8 shadow-md">
<div class="mb-4">
<label class="mb-2 block text-sm font-bold text-gray-700"> Title </label>
<input class="focus:shadow-outline w-full appearance-none rounded border @error('title') border-red-500 @enderror py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" type="text" value="{{old('title')}}" />
@error('title')
<p class="italic text-sm text-red-600">
{{ $errors->first('email') }}
</p>
@enderror
</div>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700"> Body </label>
<input class="focus:shadow-outline mb-3 w-full appearance-none rounded border @error('title') border-red-500 @enderror py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" type="text" value="{{old('body')}}" />
@error('body')
<p class="italic text-sm text-red-600">{{ $errors->first('body') }}</p>
@enderror
</div>
<div class="flex items-center justify-between">
<button class="focus:shadow-outline rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none" type="button">Submit</button>
</div>
</form>
</div>
</div>
</div>
</form>
Example #3 - Tailwind error with label
<form method="POST" action="{{ route('post.store') }}">
@csrf
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div class="px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
<div class="w-full max-w-xs">
<form class="mb-4 rounded bg-white px-8 pt-6 pb-8 shadow-md">
<div class="mb-4">
<label class="mb-2 block text-sm font-bold text-gray-700 @error('title') text-red-500 @enderror"> Title </label>
<input class="focus:shadow-outline w-full appearance-none rounded border @error('title') border-red-500 @enderror py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" type="text" value="{{old('title')}}" />
@error('title')
<p class="italic text-sm text-red-600">
{{ $errors->first('email') }}
</p>
@enderror
</div>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700 @error('title') text-red-500 @enderror"> Body </label>
<input class="focus:shadow-outline mb-3 w-full appearance-none rounded border @error('title') border-red-500 @enderror py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" type="text" value="{{old('body')}}" />
@error('body')
<p class="italic text-sm text-red-600">{{ $errors->first('body') }}</p>
@enderror
</div>
<div class="flex items-center justify-between">
<button class="focus:shadow-outline rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none" type="button">Submit</button>
</div>
</form>
</div>
</div>
</div>
</form>
Example #4 - Tailwind error with icon
<form method="POST" action="{{ route('post.store') }}">
@csrf
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div class="px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
<div class="w-full max-w-xs">
<form class="mb-4 rounded bg-white px-8 pt-6 pb-8 shadow-md">
<div class="mb-4">
<label class="mb-2 block text-sm font-bold text-gray-700 @error('title') text-red-500 @enderror"> Title </label>
<input class="focus:shadow-outline w-full appearance-none rounded border @error('title') border-red-500 @enderror py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" type="text" value="{{old('title')}}" />
@error('email')
<p class="flex items-center text-sm italic text-red-600">
{{ $errors->first('email') }}
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</p>
@enderror
</div>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700 @error('title') text-red-500 @enderror"> Body </label>
<input class="focus:shadow-outline mb-3 w-full appearance-none rounded border @error('title') border-red-500 @enderror py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" type="text" value="{{old('body')}}" />
@error('body')
<p class="flex items-center text-sm italic text-red-600">
{{ $errors->first('body') }}
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</p>
@enderror
</div>
<div class="flex items-center justify-between">
<button class="focus:shadow-outline rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none" type="button">Submit</button>
</div>
</form>
</div>
</div>
</div>
</form>
Example #5 - Tailwind error with background
<form method="POST" action="{{ route('post.store') }}">
@csrf
<div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
<div class="px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10">
<div class="w-full max-w-xs">
<form class="mb-4 rounded bg-white px-8 pt-6 pb-8 shadow-md">
<div class="mb-4">
<label class="mb-2 block text-sm font-bold text-gray-700 @error('title') text-red-500 @enderror"> Title </label>
<input class="focus:shadow-outline w-full appearance-none rounded border @error('title') border-red-500 bg-red-100 text-red-900 @enderror py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" type="text" value="{{old('title')}}" />
@error('email')
<p class="flex items-center text-sm italic text-red-600">
{{ $errors->first('email') }}
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</p>
@enderror
</div>
<div class="mb-6">
<label class="mb-2 block text-sm font-bold text-gray-700 @error('title') text-red-500 @enderror"> Body </label>
<input class="focus:shadow-outline mb-3 w-full appearance-none rounded border @error('body') border-red-500 bg-red-100 text-red-900 @enderror py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none" type="text" value="{{old('body')}}" />
@error('body')
<p class="flex items-center text-sm italic text-red-600">
{{ $errors->first('body') }}
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</p>
@enderror
</div>
<div class="flex items-center justify-between">
<button class="focus:shadow-outline rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none" type="button">Submit</button>
</div>
</form>
</div>
</div>
</div>
</form>
Now we are going to test the application so run command below to start the server
php artisan serve
Choose one of these example to apply the most suitable for your website, hope this article help you. Have a nice day!
You might Also Like:
Laravel PHP
Founder of CamboTutorial.com, I am happy to share my knowledge related to programming that can help other people. I love write tutorial related to PHP, Laravel, Python, Java, Android Developement, all published post are make simple and easy to understand for beginner. Follow him