Laravel Bootstrap Modal Form Validation: Complete Guide

By Krunal Last updated Mar 1, 2022 6

Laravel provides an easy way to validate without ajax.

Laravel Bootstrap Modal Form Validation

To create a bootstrap modal form validation in Laravel, use the simple ajax form validation using a bootstrap modal. The server checks all the input fields against specified validation, and if any of the validation breaks, it will redirect to our create page with error messages. Now we create a UEFA Champion League goalscorer application using Laravel Bootstrap Modal.

First, we will install the laravel and then configure it.

Step 1: Configure Laravel Project.

Install the new Laravel project by typing the following command.

composer create-project --prefer-dist laravel/laravel championsleaguegoalscorer

Step 2: Setup a MySQL database in .env file.

Configure the database in the .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=championsleague
DB_USERNAME=root
DB_PASSWORD=

I have set up local database credentials.

Next, migrate two tables provided by Laravel. Switch to your terminal and hit the following command.

php artisan migrate

It will create 2(two) tables in your database.

users
password_resets

Step 3: Build a model, migration file, and controller for our Goalscorer table.

Hit the following command in your terminal.

php artisan make:model Goalscorer -m

It will create two files.

Goalscorer.php model.
create_goalscorers_table migration file.

We need to create Schema for thegoalscorers table. So navigate to Laravel >> database >> migrations >> create_goalscorers_table.

//create_goalscorers_table
/**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('goalscorers', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('club');
            $table->string('country');
            $table->integer('score');
            $table->timestamps();
        });
    }

Now, migrate the table to the database.

php artisan migrate

In the database, you can see the goalscorers table.

Step 4: Construct a view file to add the Scorer Detail in the database.

C a file in the resources >> views >> create.blade.php and add the following code.

<!-- create.blade.php -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="_token" content="{{csrf_token()}}" />
    <title>Champion League Goalscorer</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css" rel="stylesheet">  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.js"></script> 
  </head>
  <body>

  	<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="open">Open Modal</button>
	<form method="post" action="{{url('chempionleague')}}" id="form">
		@csrf
  <!-- Modal -->
  <div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    	<div class="alert alert-danger" style="display:none"></div>
      <div class="modal-header">
      	
        <h5 class="modal-title">Uefa Champion League</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
            <div class="form-group col-md-4">
              <label for="Name">Name:</label>
              <input type="text" class="form-control" name="name" id="name">
            </div>
          </div>
          <div class="row">
              <div class="form-group col-md-4">
                <label for="Club">Club:</label>
                <input type="text" class="form-control" name="club" id="club">
              </div>
          </div>
          <div class="row">
             <div class="form-group col-md-4">
                <label for="Country">Country:</label>
                <input type="text" class="form-control" name="country" id="country">
              </div>
          </div>
          <div class="row">
            <div class="form-group col-md-4">
              <label for="Goal Score">Goal Score:</label>
              <input type="text" class="form-control" name="score" id="score">
            </div>
          </div>
      </div>
      <div class="modal-footer">
      	<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button  class="btn btn-success" id="ajaxSubmit">Save changes</button>
        </div>
    </div>
  </div>
</div>
  </form>
</div>
</body>
</html>

Step 5: Add jQuery code.

Now, include jQuery.ajax() function in that click event to submit the request to the server.

<script src="http://code.jquery.com/jquery-3.3.1.min.js"
               integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
               crossorigin="anonymous">
      </script>
      <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      <script>
         jQuery(document).ready(function(){
            jQuery('#ajaxSubmit').click(function(e){
               e.preventDefault();
               $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                  }
              });
               jQuery.ajax({
                  url: "{{ url('/chempionleague') }}",
                  method: 'post',
                  data: {
                     name: jQuery('#name').val(),
                     club: jQuery('#club').val(),
                     country: jQuery('#country').val(),
                     score: jQuery('#score').val(),
                  },
                  success: function(result){
                  	if(result.errors)
                  	{
                  		jQuery('.alert-danger').html('');

                  		jQuery.each(result.errors, function(key, value){
                  			jQuery('.alert-danger').show();
                  			jQuery('.alert-danger').append('<li>'+value+'</li>');
                  		});
                  	}
                  	else
                  	{
                  		jQuery('.alert-danger').hide();
                  		$('#open').hide();
                  		$('#myModal').modal('hide');
                  	}
                  }});
               });
            });
      </script>

Final code of create.blade.php looks like below.

<!-- create.blade.php -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="_token" content="{{csrf_token()}}" />
    <title>Champion League Goalscorer</title>
    <link rel="stylesheet" href="{{asset('css/app.css')}}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css" rel="stylesheet">  
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.js"></script> 
  </head>
  <body>

  	<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="open">Open Modal</button>
	<form method="post" action="{{url('chempionleague')}}" id="form">
		@csrf
  <!-- Modal -->
  <div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    	<div class="alert alert-danger" style="display:none"></div>
      <div class="modal-header">
      	
        <h5 class="modal-title">Uefa Champion League</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
            <div class="form-group col-md-4">
              <label for="Name">Name:</label>
              <input type="text" class="form-control" name="name" id="name">
            </div>
          </div>
          <div class="row">
              <div class="form-group col-md-4">
                <label for="Club">Club:</label>
                <input type="text" class="form-control" name="club" id="club">
              </div>
          </div>
          <div class="row">
             <div class="form-group col-md-4">
                <label for="Country">Country:</label>
                <input type="text" class="form-control" name="country" id="country">
              </div>
          </div>
          <div class="row">
            <div class="form-group col-md-4">
              <label for="Goal Score">Goal Score:</label>
              <input type="text" class="form-control" name="score" id="score">
            </div>
          </div>
      </div>
      <div class="modal-footer">
      	<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button  class="btn btn-success" id="ajaxSubmit">Save changes</button>
        </div>
    </div>
  </div>
</div>
  </form>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
               integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
               crossorigin="anonymous">
      </script>
      <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      <script>
         jQuery(document).ready(function(){
            jQuery('#ajaxSubmit').click(function(e){
               e.preventDefault();
               $.ajaxSetup({
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                  }
              });
               jQuery.ajax({
                  url: "{{ url('/chempionleague') }}",
                  method: 'post',
                  data: {
                     name: jQuery('#name').val(),
                     club: jQuery('#club').val(),
                     country: jQuery('#country').val(),
                     score: jQuery('#score').val(),
                  },
                  success: function(result){
                  	if(result.errors)
                  	{
                  		jQuery('.alert-danger').html('');

                  		jQuery.each(result.errors, function(key, value){
                  			jQuery('.alert-danger').show();
                  			jQuery('.alert-danger').append('<li>'+value+'</li>');
                  		});
                  	}
                  	else
                  	{
                  		jQuery('.alert-danger').hide();
                  		$('#open').hide();
                  		$('#myModal').modal('hide');
                  	}
                  }});
               });
            });
      </script>


</body>
</html>

Step 6: Create one controller and route

php artisan make:controller GoalscorerController --resource

It will create one controller file called GoalscorerController.php.

We register one route in routes >> web.php file. So let us do it.

// web.php

Route::resource('chempionleague','GoalscorerController');

Now, shift to your terminal and type the next command.

php artisan route:list

The next step would be to go to the GoalscorerController.php file and add some code into the create () function.

// GoalscorerController.php

  /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('create');
    }

After starting the Laravel Development server, go to the terminal follow the following command.

php artisan serve

Transfer to the browser and hit this URL: http://localhost:8000/chempionleague/create

Step 7: Write the store function to store the data

We require coding the store function in sequence to store the data in the database.

//GoalscorerController.php
/**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {

         $validator = \Validator::make($request->all(), [
            'name' => 'required',
            'club' => 'required',
            'country' => 'required',
            'score' => 'required',
        ]);
        
        if ($validator->fails())
        {
            return response()->json(['errors'=>$validator->errors()->all()]);
        }
        $goalscorer= new Goalscorer();
        $goalscorer->name=$request->get('name');
        $goalscorer->club=$request->get('club');
        $goalscorer->country=$request->get('country');
        $goalscorer->score=$request->get('score');
        $goalscorer->save();
   
        return response()->json(['success'=>'Data is successfully added']);
    }

Step 8: Display Error

If you press the submit button and all fields are blank, the validator fails and displays errors.

Finally, Laravel Bootstrap Modal Form Validation Tutorial is over.

6 Comments

shavindi pathirana says 4 years ago

Thanks a lot. Im new to laravel. This helped me a lot. Keep uploading more.

Khanh says 3 years ago

I did all the steps above but it errors as follows:

Uncaught TypeError: Cannot read property ‘fn’ of undefined
at util.js:70
at util.js:10
at bootstrap.min.js:6
at bootstrap.min.js:6
(anonymous) @ util.js:70
(anonymous) @ util.js:10
(anonymous) @ bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6

3jquery-3.3.1.min.js:2
POST http://127.0.0.1:8000/chempionleague 500 (Internal Server Error)
send @ jquery-3.3.1.min.js:2
ajax @ jquery-3.3.1.min.js:2
(anonymous) @ create:81
dispatch @ jquery-3.3.1.min.js:2
y.handle @ jquery-3.3.1.min.js:2

Can you help me? Please.

1. tae says 3 years ago
  
  I got same problem so I changed scripts order jquery before bootstrap, it works
  
vipul dudhat says 3 years ago

very nice and usefull

Indika Bandara says 2 years ago

Thanks for the article. It really helped me. Thanks once again.

wazirkhan says 2 years ago

how i show json responsive in view

This site uses Akismet to reduce spam. Learn how your comment data is processed.