Laravel 7/6 Ajax Form Submit Validation Tutorial

Laravel 7/6 Ajax Form Submit Validation Tutorial

Laravel ajax post form data on the controller with jQuery validation tutorial. This tutorial explains to you, how you can post the form data on the controller using ajax request with jquery validation(Client side) in laravel.

In this tutorial, you can submit the form using jQuery ajax and without refresh the whole web page. When submitting an ajax form in laravel, you will add csrf token in ajax post request.

Laravel Ajax Post Form Data With Validation

Follow the below steps and easily post/submit form data using ajax on the laravel controller with jQuery validation:

  • Install Laravel Fresh Setup
  • Configure .env file
  • Create One Model and Migration
  • Make Route
  • Generate Controller by Command
  • Create Blade View
  • Start Development Server

Step 1: Install Laravel Fresh Setup

In this step, we will download a new laravel setup. Use the below following command and download it :

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

Step 2: Configure .env file

Next Go to your project root directory, find .env file and setup database credential here :

 DB_CONNECTION=mysql 
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

Step 3: Create Model and Migration

In this step, we will create one model and migration name Contact. Use the below following command and create it

php artisan make:model Contact -m

In this command -m is created the migration file

Next, go to /database/migrations and open contact migration file and put the below code here :

<?php

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

class CreateContactsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email');
            $table->string('mobile_number');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

After successfully create migration file and fields than run the below command for creating a table in the database :

php artisan migrate

Step 4: Make Route

Create two routes one for show form and the second route send data to the server :

 Route::get('ajax-form-submit', 'FormController@index');
Route::post('save-form', 'FormController@store');

Step 5: Generate Controller by Command

Now we will create a controller. Use the below command for create/generate controller:

php artisan make:controller FormController 

Next, we will create two methods inside the controller first index method is used to display contact form and second store method is used to store data in the mysql database :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Validator,Redirect,Response;
use App\Contact;

class FormController extends Controller
{

    public function index()
    {
        return view('ajax-form');
    }       

    public function store(Request $request)
    {  
        request()->validate([
        'name' => 'required',
        'email' => 'required|email|unique:users',
        'mobile_number' => 'required|unique:users'
        ]);
        
        $data = $request->all();
        $check = Contact::insert($data);
        $arr = array('msg' => 'Something goes to wrong. Please try again lator', 'status' => false);
        if($check){ 
        $arr = array('msg' => 'Successfully submit form using ajax', 'status' => true);
        }
        return Response()->json($arr);
      
    }
}

Step 6: Create a blade view

In this step, we will create one blade file name ajax-form.blade.php.

In this ajax form, we will implement a jquery submit handler. first, we will validate form using jquery validation and second is to submit an ajax form using submit handler.

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>laravel 6 Ajax Form Submission Example - Tutsmake.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
  <style>
   .error{ color:red; } 
  </style>
</head>
 
<body>
 
<div class="container">
    <h2 style="margin-top: 10px;">laravel 6 Ajax Form Submission Example - <a href="https://www.tutsmake.com" target="_blank">TutsMake</a></h2>
    <br>
    <br>
   
    <form id="contact_us" method="post" action="javascript:void(0)">
      @csrf
      <div class="form-group">
        <label for="formGroupExampleInput">Name</label>
        <input type="text" name="name" class="form-control" id="formGroupExampleInput" placeholder="Please enter name">
        <span class="text-danger">{{ $errors->first('name') }}</span>
      </div>
      <div class="form-group">
        <label for="email">Email Id</label>
        <input type="text" name="email" class="form-control" id="email" placeholder="Please enter email id">
        <span class="text-danger">{{ $errors->first('email') }}</span>
      </div>      
      <div class="form-group">
        <label for="mobile_number">Mobile Number</label>
        <input type="text" name="mobile_number" class="form-control" id="mobile_number" placeholder="Please enter mobile number" maxlength="10">
        <span class="text-danger">{{ $errors->first('mobile_number') }}</span>
      </div>
      <div class="alert alert-success d-none" id="msg_div">
              <span id="res_message"></span>
      </div>
      <div class="form-group">
       <button type="submit" id="send_form" class="btn btn-success">Submit</button>
      </div>
    </form>
 
</div>
<script>
   if ($("#contact_us").length > 0) {
    $("#contact_us").validate({
     
    rules: {
      name: {
        required: true,
        maxlength: 50
      },
 
       mobile_number: {
            required: true,
            digits:true,
            minlength: 10,
            maxlength:12,
        },
        email: {
                required: true,
                maxlength: 50,
                email: true,
            },    
    },
    messages: {
       
      name: {
        required: "Please enter name",
        maxlength: "Your last name maxlength should be 50 characters long."
      },
      mobile_number: {
        required: "Please enter contact number",
        digits: "Please enter only numbers",
        minlength: "The contact number should be 10 digits",
        maxlength: "The contact number should be 12 digits",
      },
      email: {
          required: "Please enter valid email",
          email: "Please enter valid email",
          maxlength: "The email name should less than or equal to 50 characters",
        },
        
    },
    submitHandler: function(form) {
     $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });
      $('#send_form').html('Sending..');
      $.ajax({
        url: 'http://localhost/blog/save-form' ,
        type: "POST",
        data: $('#contact_us').serialize(),
        success: function( response ) {
            $('#send_form').html('Submit');
            $('#res_message').show();
            $('#res_message').html(response.msg);
            $('#msg_div').removeClass('d-none');

            document.getElementById("contact_us").reset(); 
            setTimeout(function(){
            $('#res_message').hide();
            $('#msg_div').hide();
            },10000);
        }
      });
    }
  })
}
</script>
</body>
</html>

We will validate form data before submit, check validation like mobile number contains only digits not accept the character. The name filed contains 50 characters only. The email contains valid email and max length of only 50 characters. we will use post method in laravel ajax with csrf token

After a submit form successfully, we will reset the form data using the javascript form reset method.

Step 7: Start Development Server

In this step, we will use the php artisan serve command. It will start your server locally

 php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080

Now we are ready to run our example so run bellow command to quick run.

http://127.0.0.1:8000/ajax-form-submit

Conclusion

In this laravel jquery ajax form submission example, we have successfully created ajax form and methods. We have implemented ajax form submits handler. Laravel ajax post form to controller successfully without page refresh or reload, and form data reset using javascript form reset() method.

Recommended Laravel Posts

  1. Laravel Google ReCaptcha Form Validation
  2. Laravel 7/6 | jQuery Form Validation Tutorial with Demo Example
  3. Form Validation Example In Laravel
  4. Laravel 7/6 CRUD Example Tutorial (Step By Step)
  5. Laravel 7/6 – Ajax CRUD (Operation) Application Example
  6. Datatables Ajax CRUD Laravel 7/6 Tutorial Example
  7. Laravel 7/6 Angular JS CRUD Example Tutorial

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *