Laravel - Validation Form using Tailwind CSS as Example

Sovary August 1, 2022 444
9 minutes read

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.

Validate Form with Tailwind

  • Step 1 - Download Laravel Project
  • Step 2 - Install Tailwind CSS
  • Step 3 - Create Controller
  • Step 4 - Adding Route
  • Step 5 - Create View (Blade File)
  • Step 6 - Run Laravel Server

Step 1 - Download Laravel Project

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.

Step 2 - Install Tailwind CSS

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.

Step 3 - Create Controller

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');
    }
}

Step 4 - Adding Route

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');

Step 5 - Create View (Blade File)

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>

Step 6 - Run Laravel Server

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 
Author

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    

Search
Tags
Laravel 6.* Hosting Javascript JQuery Laravel Cheerio Android Kotlin Java Video Firebase Web scraping Admob PHP Python Ajax Node.js Laravel 9 Query Builder Laravel Middleware Carbon Laravel Laravel Collections Laravel Mail Laravel 10 CSS
Popular Articles
Related Articles