Laravel 7 Form Submit Using Ajax with Validations Example

Laravel Form Submit Using Ajax with Validations Example step by step from scratch is today’s leading topic. Here we are going to share how to submit data a click event using jquery ajax request and save data into database table. To saving data in database using laravel 7 we use POST request to submit data using ajax jquery easy step.

Using jquery ajax request we submit data in database without refresh the page also show the error and success messages easily. Le’ts checkout how to submit a form in laravel 7 using ajax jquery. This example works in your laravel 5, laravel 6, laravel 7 or laravel 8 version.

Step 1: Add Routes

First add two routes in your web.php file.


Route::get('contact-form', 'ContactController@create');
Route::post('contact-form', 'ContactController@store');

Step 2: Create Model & Migration File

Run the below command generate the model and migration file.

php artisan make:model Contact -m

After this add below code in your migration file.



use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateContactsTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('contacts', function (Blueprint $table) {

     * Reverse the migrations.
     * @return void
    public function down()

Run Migrate Commad

php artisan migrate

Add FIllable Properties

Add gillable properties in your contact model.



namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model
      * The attributes that are mass assignable.
      * @var array
     protected $fillable = [
         'name', 'email', 'subject', 'mobile_number', 'message'

Step 3: Create Controller

Create a new controller just run the below command in your terminal.

php artisan make:controller ContactController

After getting the new controller put the below code on it. Here we have added two methods one is showing the form and the another is for showing validations errors and saving the data in database.



namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Contact;
class ContactController extends Controller
      public function create()

        return view('contact-form');

     public function store(Request $request)
             'name'           => 'required',
             'email'          => 'required|email',
             'subject'        => 'required',
             'mobile_number'  => 'required|numeric',
             'message'        => 'required',

            'name'          => $request->name,
            'email'         => $request->email,
            'subject'       => $request->subject,
            'mobile_number' => $request->mobile_number,
            'message'       => $request->message,

        return response()->json([ 'success'=> 'Form is successfully submitted!']);


Step 4: Create Blade File

Crate a new blade file which is show the form where we send the ajax request for showing form validations and etc functionalities.


<html lang="en">
    <title>Laravel Ajax jquery Validation Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="">

<div class="container panel panel-default ">
        <h2 class="panel-heading">Laravel Ajax jquery Validation</h2>
    <form id="contact-form">
        <div class="form-group">
            <input type="text" name="name" class="form-control" placeholder="Enter Name" id="name">
            <span class="text-danger" id="name-error"></span>

        <div class="form-group">
            <input type="text" name="email" class="form-control" placeholder="Enter Email" id="email">
            <span class="text-danger" id="email-error"></span>

        <div class="form-group">
            <input type="text" name="mobile_number" class="form-control" placeholder="Enter Mobile Number" id="mobile_number">
            <span class="text-danger" id="mobile-number-error"></span>

        <div class="form-group">
            <input type="text" name="subject" class="form-control" placeholder="Enter subject" id="subject">
            <span class="text-danger" id="subject-error"></span>

        <div class="form-group">
          <textarea class="form-control" name="message" placeholder="Message" id="message"></textarea>
          <span class="text-danger" id="message-error"></span>
        <div class="form-group">
            <button class="btn btn-success" id="submit">Submit</button>
        <div class="form-group">
            <b><span class="text-success" id="success-message"> </span><b>
    <script src=""></script>

   <script type="text/javascript">
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

    $('#contact-form').on('submit', function(event){

        name = $('#name').val();
        email = $('#email').val();
        mobile_number = $('#mobile_number').val();
        subject = $('#subject').val();
        message = $('#message').val();

          url: "/contact-form",
          type: "POST",
            if (response) {
          error: function(response) {

Great! you have learned Laravel 7 Form Submit Using Ajax with Validations Example tutorials. I hope this is work for you.. If any question feel free to contact below.

2 thoughts on “Laravel 7 Form Submit Using Ajax with Validations Example”

Leave a Comment