Show Error Message Below Input Field in Laravel Blade

by

Laravel display error messages example tutorial; you will learn how to show error message below input field in blade file. Validations is most important role in our admin panel.

Many times we need to show error message beside specific field and also more then times clients requirement to show red the input box. So, here you can get both code to showing error below the input box and show the input box to red if error occured from controller.

You can use basic and easy way to showing laravel validation and showing error messages per specifix field with laravel 5, laravel 6, laravel 7, laravel 8 or laravel 9 application.

Make Routes

Eventually, you need a route to be added in the routes/web.php; it helps to show error mesasges in blade file from controller.

Route::get('posts', 'PostController@create');
Route::post('posts', 'PostController@store')->name('posts');

Create Controller

Generate a controller file; here, you will define the functions to display error messages in blade view file:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PostController extends Controller
{
     public function create()
     {
         return view('posts');
     }

     public function store(Request $request)
     {
         $request->validate([
            'title' => 'required|unique:posts|max:255',
            'discription' => 'required',
         ]);

         Post::create($request);

         return back()->with('success', 'Post created successfully.');
     }
}

Create Blade File

Now, head over to resources/views inside here create posts.blade.php file and update code in resources/views/create-post.blade.php file.

<!DOCTYPE html>
<html>
<head>
    <title>Laravel form validation example - codingdriver.com</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
      .is-invalid {
        border-color: red;
      }
    </style>
</head>
<body>
    <div class="container">

        <h1>Laravel form validation Example</h1>

        @if(Session::has('success'))
        <div class="alert alert-success">
            {{ Session::get('success') }}
            @php
                Session::forget('success');
            @endphp
        </div>
        @endif

        <form method="POST" action="{{ route('posts') }}">

            {{ csrf_field() }}

            <div class="form-group">
                <label>Title:</label>
                <input type="text" name="title" class="form-control" placeholder="Name">
                @if ($errors->has('title'))
                    <span class="text-danger">{{ $errors->first('title') }}</span>
                @endif
            </div>

            <div class="form-group">
                <strong>Discription:</strong>
                <textarea name="discription" class="form-control" placeholder="Discription"></textarea>
                @if ($errors->has('discription'))
                    <span class="text-danger">{{ $errors->first('discription') }}</span>
                @endif
            </div>

            <div class="form-group">
                <button class="btn btn-success btn-submit">Submit</button>
            </div>
        </form>
    </div>
</body>
</html>

Show Input Box to Red If Error Occured Laravel Blade

This below code show the input box, textarea to red if validation error occured from controller.

<form method="POST" action="{{ route('posts') }}">

    {{ csrf_field() }}

    <div class="form-group">
        <label>Title:</label>
        <input type="text" name="title" class="form-control {{ $errors->has('title') ? ' is-invalid' : '' }}" placeholder="Name">
        @if ($errors->has('title'))
            <span class="text-danger">{{ $errors->first('title') }}</span>
        @endif
    </div>

    <div class="form-group">
        <strong>Discription:</strong>
        <textarea name="discription" class="form-control {{ $errors->has('discription') ? ' is-invalid' : '' }}" placeholder="Discription"></textarea>
        @if ($errors->has('discription'))
            <span class="text-danger">{{ $errors->first('discription') }}</span>
        @endif
    </div>

    <div class="form-group">
        <button class="btn btn-success btn-submit">Submit</button>
    </div>
</form>

You can use the class in your input box, textarea, radio, textboxes, select box etc which you want to show red.

See Also: Displaying Error Messages in laravel – Form Validation Example

That’s all How to show error message below input field in blade file – Laravel question is over now.

1 thought on “Show Error Message Below Input Field in Laravel Blade”

  1. Pingback: Displaying Error Messages in laravel - Form Validation Example

Leave a Comment