Laravel 11 jQuery Form Validation Example

In this tutorial, i will show you how to create form and validate form data on client side in laravel 11 applications before submit on server.

Now, i will create a form and add jQuery validation in it to validate form fields before submitting on server using laravel 11 applications.

Let’s start to create laravel jquery form validation example application:

Step 1 – Download Laravel 11 Application

Run the below given command to download laravel 11 application:

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

Step 2 – Create Form Controller

Create a controller with a method to handle the form submission by running the following command:

cd MyProject

php artisan make:controller jQueryFormController

Create two methods in app/http/controllers/jQueryFormController.php file that is used to show form and handle form submission:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class jQueryFormController extends Controller
{
    public function index()
    {
        return view('jQuery-form');
    }

    public function submitForm(Request $request)
    {
        
        $validatedData = $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email|max:255',
        ]);
      
       // Process the form data, e.g., save to database
       
        return redirect('jquery-form')->with('status', 'Form Has Been Validate and Store it in Database');
    }

Step 3 – Create Routes

Create a route that handle form submission and form showing requests web.php routes file (routes/web.php), add the following route in web.php:


use App\Http\Controllers\jQueryFormController;

Route::get('jquery-form', [jQueryFormController::class, 'index']);
Route::post('submit-form', [jQueryFormController::class, 'submitForm']);

Step 4 – Create Form

Create a blade view file named jQuery-form.blade.php in resource/views folder, and create a form in jQuery-form.blade.php file, add the below given code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel 11 Form Validation using jQuery Example - ItcodStuff.com</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
</head>
<body>
<div class="container">

  @if(session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
  @endif

  <div class="card">
    <div class="card-header text-center font-weight-bold">
      <h2>Laravel 11 Form Validation using jQuery Example - ItcodStuff.com</h2>
    </div>
    <div class="card-body">
       <form id="jQueryForm" method="POST" action="{{ url('submit-form') }}">

       @csrf

        <div class="form-group">
          <label for="exampleInputName">Name</label>
           <input type="text" name="name" id="name" placeholder="Enter your name">
          @error('name')
              <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
          @enderror
        </div>   

        <div class="form-group">
          <label for="exampleInputEmail1">Email</label>
           <input type="email" name="email" id="email" placeholder="Enter your email">
          @error('email')
              <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
          @enderror
        </div>
      
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</div>    

</body>
</html>

Step 5 – Add jQuery Validation

Create jQuery validation rules and messages and add it in jQuery-form.blade.php file, add the below given code in it:

<script>
        $(document).ready(function() {
            $('#jQueryForm').validate({
                rules: {
                    name: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    name: {
                        required: "Please enter your name"
                    },
                    email: {
                        required: "Please enter your email",
                        email: "Please enter a valid email address"
                    }
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        });
    </script>

Step 6 – Test Application

Run application using below given command:

php artisan serve

Visit http://localhost:8000/jquery-form in your web browser to see the form.

Conclusion

The form data will be validated both client-side and server-side, and the form will be submitted if it passes validation in laravel 11 applications.

Reference by jQuery Validation:- https://jquery validation.org.