Laravel 8.x Ajax Form Submit With JQuery Validation

In this tutorial i will show you how to insert data using ajax in laravel 8. In this tutorial we will also do form validation using ajax in laravel. We will insert our data into database without refreshing our web page.

In this laravel ajax form submit with validation tutorial you will learn how to validate html form data using jquery ajax in laravel 8. We need to validate data before submitting form data to database. But if we can validate this form data using jquery ajax then it would be best for us.

That's why in this example tutorial we will see form validation using ajax and jquery in laravel 8. Laravel ajax validation will make our website more faster and beautiful. I will show laravel ajax form submit with validation step by step.       

Let's start Laravel ajax form submit with validation tutorial. So let's learn submit form without reloading page laravel 8 from scratch.

Preview of this tutorial. If we click submit button before giving required data, it will show those error message.

Step 1: Install Laravel 8

First of all, we need to get fresh Laravel 6 version application using bellow command because we are going from scratch, So open your terminal OR command prompt and run bellow command:

Read Also Delete Record using Ajax Request in Laravel

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

Step 2: Database Configuration

In this step, we need to add database configuration details on .env file. So let's create username, password etc. So let's add.

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

After added database configuration , we need a table to insert our data into database.

Step 3: Create  database table

For creating database table with model , just run below command

php artisan make:model Company -m

here -m for creating migration to corresponding model . Hope you understand. after running this command we have companies table in our database/migrations folder. So open this companies table and paste below code to two table.

Schema::create('companies', function (Blueprint $table) {
   $table->bigIncrements('id');
   $table->string('name');
   $table->string('address');
   $table->timestamps();
});

Our table is completed. Run below command to migrate those table into our database.

php artisan migrate

Step 4 :  Setup route

Now time to setup our route. to create route just paste the following code.

routes/web.php

Route::post('/addcompany', 'CompanyController@Store')->name('company.store');

Now we need CompanyController to insert our data. So we need to create CompanyController.

app/Http/Controllers/CompanyController.php

public function Store(Request $request)
    {
        

        \DB::table('companies')->insert([
            'name' => $request->name, 
            'address' => $request->address, 
        ]);

        return response()->json(
            [
                'success' => true,
                'message' => 'Data inserted successfully'
            ]
     );
}

Here $request->name and $request->address data coming from ajax request. to understand , see below code.

Step 5 :  Create Blade File

Now we have to create our blade file to see insert form. But we will use laravel default welcome page. So open welcome page and paste the following code.

Here  e.preventDefault(); use to restrict page reload. You can catch all the data using jQuery serialize() method.

Read aslo Send Notification to Inactive User with Task Scheduling in Laravel using Custom Command

Now this is ready to work. Hope it will work for you.