Ajax Validation Example in Laravel 10 Step by Step

by

Using this Laravel Ajax Validation Example you will find How to validate input data using ajax in Laravel 10. Laravel provides several different approaches to validate your application’s incoming data.

Using the Ajax validations in Laravel you will send request from front-end to back-end laravel server checks all the input fields against the defined validation, if any of the validation fails, it will redirect to our form page with error messages.

How to validate input data using Ajax in Laravel

Follow the following steps to use How to validate input data using ajax in laravel;

  • Step 1: Download Laravel Application
  • Step 2: Configuring Database using Env File
  • Step 3: Create Model & Migration File For Product Add Form
  • Step 4: Create Routes
  • Step 5: Creating Controller
  • Step 6: Create Blade File For Product Add Form
  • Step 7: Start Development Server

Download Laravel App

First of all, download a new laravel application by adding the following command in the terminal.

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

Next, go into the app

laravel-livewire

Setup Database

Open the .env file and add your database credentials such as database name, username equally important password:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Make Routes

Now you need two routes one for showing forms and another is sending requests. So add below two routes in your routes/web.php file.

another is to save the data to the database using Ajax request.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FormController;

Route::get('my-form', [ FormController::class, 'create' ]);
Route::post('my-form', [ FormController::class, 'store' ]);


Route::get('/', function () {
    return view('welcome');
});

Create Controller

Now we will generate a new controller using the following command.

php artisan make:controller FormController

After creating the controller now open the app/Http/Controllers/FormController.php file and update the below code on it.

<?php 

namespace App\Http\Controllers;
use Illuminate\Http\Request;   

   class FormController extends Controller
   {

    public function create() {      
      
      return view('myform');
    }

    public function store(Request $request) {
      $this->validate($request, [
          'name' => 'required',
          'email' => 'required|email',
          'mobile_number' => 'required',
          'about' => 'required'
      ]);

      return response()->json();
    }
}

Create Blade View File

Now navigate the resources/views directory and create then myform.blade.php file inside it. Next open the resources/views/myform.blade.php file and update below code on it.

<html lang="en">
<head>
    <title>Laravel Ajax jquery Validation Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    
    <style>
      .alert-message {
        color: red;
      }
    </style>
</head>
<body>

<div class="container panel panel-default">
     <h2 class="panel-heading">Laravel Ajax jquery Validation</h2>
  <form id="myForm">
         <div class="form-group">
            <label>Name</label>
            <input type="text" name="name" class="form-control" placeholder="Enter Name" id="name">
             <div class="alert-message" id="nameError"></div>
         </div>
        
        <div class="form-group">
            <label>Email</label>
            <input type="text" name="email" class="form-control" placeholder="Enter Email" id="email">
            <div class="alert-message" id="emailError"></div>
        </div>
     
        <div class="form-group">
            <strong>Mobile Number</strong>
            <input type="text" name="mobile_number" class="form-control" placeholder="Enter Mobile Number" id="mobile_number">
            <div class="alert-message" id="mobileNumberError"></div>
        </div>
        
        <div class="form-group">
            <strong>About</strong>
            <textarea class="form-control" name="about" placeholder="About" id="about"></textarea>
            <div class="alert-message" id="aboutError"></div>
        </div>

        <div class="form-group">
            <button class="btn btn-success" id="submit">Submit</button>
        </div>
    </form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<script type="text/javascript">
  $('#myForm').on('submit',function(event){
        event.preventDefault();

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

        $.ajax({
          url: "/my-form",
          type:"POST",
          data:{
            "_token": "{{ csrf_token() }}",
            name:name,
            email:email,
            mobile_number:mobile_number,
            about:about
          },
          success:function(response){
            console.log(response); #Its return your success message
          },

          error: function(response) {
            console.log(response.responseJSON.errors.name);
              $('#nameError').text(response.responseJSON.errors.name);
              $('#emailError').text(response.responseJSON.errors.email);
              $('#mobileNumberError').text(response.responseJSON.errors.mobile_number);
              $('#aboutError').text(response.responseJSON.errors.about);
           }

         });
        });

</script>

</body>
</html>

Now you can check Ajax jQuery validation in laravel app just running bellow command:

php artisan serve

Now you can open bellow URL on your browser:

http://localhost:8000/my-form

I hope its work for you.

1 thought on “Ajax Validation Example in Laravel 10 Step by Step”

Leave a Comment