Laravel 9 Validation Errors Messages with Ajax Request

by

Laravel 9 or 8 Validation Errors with Ajax Request is very required in every project. In previous tutorial we already explain laravel 8 form submit using ajax. Here in this article we learn only how to show validation errors messages in laravel using ajax request. Laravel provides several different approaches to validate your application’s incoming data.

Here we send validations error request from front-end and back-end laravel server checks all the input field against defined validation,  if any of the validation fails, it will redirect to our form page with error messages without form refresh. So lets start to learn how to display ajax, jQuery validation in Laravel 8 step by step example.

Step 1: Add Routes

First at all update two routes in routes/web.php file one for showing the form and another is saving data and showing validation errors.

routes/web.php

<?php

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

Route::get('ajax-request', [ AjaxController::class, 'create' ]);
Route::post('ajax-request', [ AjaxController::class, 'store' ]);

Step 2: Create Controller

Now create a controller using the following command:

php artisan make:controller ContactController

After that open the app\Http\Controllers\ContactController.php file and add two methods in your controller same like below.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Contact;

class AjaxController extends Controller
{
  public function create()
  {

    return view('contact');
  }

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

      #Create or update here
      return response()->json(['success'=>'Contact form submitted successfully']);
  }
}

Step 3: Create View File

Now in this step you need to create a contact.blade.php file in your resources/views directory. Next, open the resources/views/contact.blade.php and put the below code on it;

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Ajax Post Request Example</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
</head>

<body>
    <div class="container">
        <h1>Laravel Ajax Post Request Example with <a href="https://codingdriver.com/">Coding Driver</a></h1>
          <span class="success" style="color:green; margin-top:10px; margin-bottom: 10px;"></span>
        <form id="ajaxform">
            <div class="form-group">
                <label>Name:</label>
                <input type="text" name="name" class="form-control" placeholder="Enter Name">
                <span class="text-danger" id="nameError"></span>
            </div>

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

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

            <div class="form-group">
                <strong>Mobile Number:</strong>
                <input type="text" name="mobile_number" class="form-control" placeholder="Enter Mobile">
                <span class="text-danger" id="mobileNumberError"></span>
            </div>
            <div class="form-group">
                <strong>Message:</strong>
                <textarea name="message" class="form-control" placeholder="Enter Your Message"></textarea>
                <span class="text-danger" id="messageError"></span>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-success save-data" onclick="submitForm()">Save</button>
            </div>
        </form>
    </div>

<script>
    function submitForm() {
      let name = $("input[name=name]").val();
      let email = $("input[name=email]").val();
      let subject = $("input[name=subject]").val();
      let mobile_number = $("input[name=mobile_number]").val();
      let message = $("textarea[name=message]").val();
      let _token   = $('meta[name="csrf-token"]').attr('content');

      $.ajax({
        url: "/contact",
        type:"POST",
        data:{
          name:name,
          email:email,
          subject:subject,
          mobile_number:mobile_number,
          message:message,
          _token: _token
        },
        success:function(response) {
          console.log(response);
        },
        error:function (response) {
          $('#nameError').text(response.responseJSON.errors.name);
          $('#emailError').text(response.responseJSON.errors.email);
          $('#subjectError').text(response.responseJSON.errors.subject);
          $('#mobileNumberError').text(response.responseJSON.errors.mobile_number);
          $('#messageError').text(response.responseJSON.errors.message);
        }
       });

    }
</script>
</body>
</html>

So, the Laravel 8 validations errors messages using ajax request is over now. I hope its works for you.

5 thoughts on “Laravel 9 Validation Errors Messages with Ajax Request”

  2. Hi,
    I can’t see my Laravel validation errors from the error response.

    error: function (response) {
    console.log(response.responseJSON.errors);
    }

    I created a file called ProfileImageRequest.php that handles the file upload validation rules.
    I set a max:4000, but when I upload a 7 MB file, in the console it says undefined, and show the poast request with a 403 error. But I even created a custom message in my Request file, but I can’t see any Laravel errors in the response. What am I doing wrong?

    Reply

Leave a Comment