We have already seen two validation with Laravel forms. One is with jQuery validation and another is bootstrap validation. But in this tutorial, we will see how to add validation in bootstrap modal using bootstrap 5. So, from this tutorial, you will learn how to create a modal in Laravel and submit a form. So how to create a modal in laravel 10 application and how to add validation on that before submitting is the key part of this tutorial.

So we will create a bootstrap 5 modal and add a form to it and we will validate it using bootstrap 5 and we will submit it after successful validation. You can see the demo of this bootstrap modal validation before close tutorial below. So let's see the example of laravel modal popup form.

Step 1: Download Fresh Laravel

In this first step, we need a fresh Laravel 9 application for bootstrap modal validation before submit tutorial. So download it by the below command:

composer create-project laravel/laravel example-app

 

Step 2:  Create Route

Now in this step, we will create two routes, one is for seeing the web form view and the other is for submitting the bootstrap modal form.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TutorialController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('user', [TutorialController::class, 'index'])->name('user.index');
Route::post('user', [TutorialController::class, 'store'])->name('user.store');

 

Step 3: Create Controller

Now in this step, we have to create a TutorialController to define this method to create those two methods.

php artisan make:controller TutorialController

 

Now update the controller like the below:

app/Http/Controllers/TutorialController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TutorialController extends Controller
{   
    public function index()
    {
        return view('welcome');
    }
    
    public function store(Request $request)
    {
        return $request;
    }
}

 

Step 4: Create Views

We are almost there. Just we have to create two views files before completing show laravel validation errors in modal tutorial.

  • welcome.balde.php
  • app.blade.php

So create these files inside the following path and update them like below:

resources/views/layouts/app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    @stack('style')
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    Laravelia
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav me-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <!-- Authentication Links -->
                        @guest
                            @if (Route::has('login'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                                </li>
                            @endif

                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>

                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4" style="background-color: rgb(245, 245, 245);">
            @yield('content')
        </main>
    </div>
    @stack('script')
</body>
</html>

 

Now another one for laravel bootstrap modal form validation.

resources/views/welcome.blade.php

@extends('layouts.app')
@push('style')
@section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header" style="background: gray; color:#f1f7fa; font-weight:bold;">
                    Create New User - Laravelia
                </div>
                <button type="button" class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#exampleModal">
                    Create New User
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form 
            class="w-px-500 p-3 p-md-3 needs-validation" 
            action="{{ route('user.store') }}" 
            method="post"
            role="form"
            novalidate
        >
        @csrf
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="card-body">                    
                <div class="row mb-3 form-group">
                    <label class="col-sm-3 col-form-label">Name</label>
                    <div class="col-sm-9">
                        <input 
                            type="text" 
                            class="form-control" 
                            name="name" 
                            placeholder="Name"
                            maxlength="10" 
                            minlength="3"
                            pattern="^[a-zA-Z0-9_.-]*$"
                            required
                        >
                        <div class="valid-tooltip">
                            Looks good!
                        </div>
                        <div class="invalid-tooltip">
                            Please choose a unique and valid username.
                        </div>
                    </div>
                </div>
                <div class="row mb-3 form-group">
                    <label class="col-sm-3 col-form-label">Email</label>
                    <div class="col-sm-9">
                        <input 
                            type="email" 
                            class="form-control" 
                            name="email" 
                            placeholder="Email"
                            required
                        >
                    </div>
                </div>
                <div class="row mb-3 form-group">
                    <label class="col-sm-3 col-form-label">Password</label>
                    <div class="col-sm-9">
                        <input 
                            type="password" 
                            class="form-control" 
                            name="password" 
                            id="password"
                            placeholder="Password"
                            minlength="4"
                            required
                        >
                    </div>
                </div>
                <div class="row mb-3 form-group">
                    <label class="col-sm-3 col-form-label">Confirm Password</label>
                    <div class="col-sm-9">
                        <input 
                            type="password" 
                            class="form-control" 
                            name="confirm_password" 
                            placeholder="Confirm password"
                            required
                        >
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
    </form>
      </div>
    </div>
</div>

@endsection
@push('script')
<script>
document.addEventListener("DOMContentLoaded", function() {
  const forms = document.querySelectorAll('.needs-validation');
  Array.prototype.slice.call(forms).forEach((form) => {
    form.addEventListener('submit', (event) => {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  });
});
</script>
@endpush

 

Read also: Laravel 10 Bootstrap 5 Form Validation Tutorial

 

Conclusion

Now we know bootstrap modal validation before submit. Hope this laravel bootstrap modal form validation tutorial will help you. After completing this bootstrap modal validation before close, your concept will be clear about show laravel validation errors in modal.