Laravel 11 Ajax Form Validation Example Tutorial

In this post, I will show you how to add jQuery Ajax form validation in a Laravel 11 application.

Ajax requests are a basic requirement of any PHP project. We are always looking for a way to store data in the database without refreshing the page, and this is possible only through jQuery Ajax requests. If you need to write an Ajax form and submit it in Laravel 11, then I will show you how to pass data with an Ajax request and get it on the controller.

In this example, we will create a "posts" table with "title" and "body" columns. We will list all post data and add a create button there. When you click on the create button, we will open a modal where you can create a new post using a jQuery Ajax request. So basically, you can fire an Ajax post request with a Bootstrap modal.

Step for Laravel 11 Ajax Form Validation Example

• Step 1: Install Laravel 11
• Step 2: Create Migration and Model
• Step 3: Create Controller
• Step 4: Create Routes
• Step 5: Create Blade File
• Run Laravel App

So, let's follow the below steps to do this example.

Step 1: Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Migration and Model

Here, we will create a migration for the "posts" table. Let's run the command below and update the code.

php artisan make:migration create_posts_table

database/migrations/2024_03_21_133331_create_posts_table.php

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up(): void()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down(): void
    {
        Schema::dropIfExists('posts');
    }
};

Next, simply run the above-created new migration.

php artisan migrate

Now we will create a Post model by using the following command:

php artisan make:model Post

app/Models/Post.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Post extends Model
{
    use HasFactory;

    /**
     * Write code on Method
     *
     * @return response()
     */
    protected $fillable = [
        'title', 'body'
    ];
}

Step 3: Create Controller

In this step, we will create a new PostController. In this file, we will add two methods: index() and store(), for rendering views and creating posts with JSON response.

Let's create PostController using the following command:

php artisan make:controller PostController

Next, let's update the following code in the Controller file.

app/Http/Controllers/PostController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use App\Models\Post;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
  
class PostController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(): View
    {
        $posts = Post::get();
     
        return view('posts', compact('posts'));
    }
      
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function store(Request $request): JsonResponse
    {
        $request->validate([
            'title' => 'required',
            'body' => 'required',
        ]);
           
        Post::create([
            'title' => $request->title,
            'body' => $request->body,
        ]);
      
        return response()->json(['success' => 'Post created successfully.']);
    }
}

Step 4: Create Routes

Furthermore, open the `routes/web.php` file and add the routes to manage GET and POST requests for rendering views and AJAX post requests.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\PostController;
  
Route::get('posts', [ PostController::class, 'index' ]);
Route::post('posts', [ PostController::class, 'store' ])->name('posts.store');

Step 5: Create Blade File

At the last step, we need to create a posts.blade.php file. In this file, we will display all posts and write code for jQuery AJAX requests. So, copy below and paste it into that file.

resources/views/posts.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Ajax Form Validation Example - ItSolutionStuff.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" ></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body>
         
<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3"><i class="fa fa-star"></i> Laravel 11 Ajax Form Validation Example - ItSolutionStuff.com</h3>
        <div class="card-body">
      
            <table class="table table-bordered mt-3">
                <tr>
                    <th colspan="3">
                        List Of Posts
                        <button type="button" class="btn btn-success float-end" data-bs-toggle="modal" data-bs-target="#postModal"><i class="fa fa-plus"></i> 
                          Create Post
                        </button>
                    </th>
                </tr>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Body</th>
                </tr>
                @foreach($posts as $post)
                    <tr>
                        <td>{{ $post->id }}</td>
                        <td>{{ $post->title }}</td>
                        <td>{{ $post->body }}</td>
                    </tr>
                @endforeach
            </table>
      
        </div>
    </div>
</div>
      
<!-- Modal -->
<div class="modal fade" id="postModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Create Post</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="ajax-form" action="{{ route('posts.store') }}">
            @csrf
      
            <div class="alert alert-danger print-error-msg" style="display:none">
                <ul></ul>
            </div>
        
            <div class="mb-3">
                <label for="titleID" class="form-label">Title:</label>
                <input type="text" id="titleID" name="title" class="form-control" placeholder="Name">
            </div>
      
            <div class="mb-3">
                <label for="bodyID" class="form-label">Body:</label>
                <textarea name="body" class="form-control" id="bodyID"></textarea>
            </div>
         
            <div class="mb-3 text-center">
                <button class="btn btn-success btn-submit"><i class="fa fa-save"></i> Submit</button>
            </div>
        
        </form>
      </div>
    </div>
  </div>
</div>
         
</body>
      
<script type="text/javascript">
          
    /*------------------------------------------
    --------------------------------------------
    Form Submit Event
    --------------------------------------------
    --------------------------------------------*/
    $('#ajax-form').submit(function(e) {
        e.preventDefault();
         
        var url = $(this).attr("action");
        let formData = new FormData(this);
    
        $.ajax({
                type:'POST',
                url: url,
                data: formData,
                contentType: false,
                processData: false,
                success: (response) => {
                    alert('Form submitted successfully');
                    location.reload();
                },
                error: function(response){
                    $('#ajax-form').find(".print-error-msg").find("ul").html('');
                    $('#ajax-form').find(".print-error-msg").css('display','block');
                    $.each( response.responseJSON.errors, function( key, value ) {
                        $('#ajax-form').find(".print-error-msg").find("ul").append('<li>'+value+'</li>');
                    });
                }
           });
        
    });
      
</script>
      
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/posts

Output:

I hope it can help you...