Laravel 10 jQuery Form Validation Example Tutorial

jQuery validation in Laravel usually refers to the process of using jQuery, a popular JavaScript library, to perform client-side form validation in a Laravel application. This approach enhances user experience by checking user input on the client side before submitting the data to the server for processing. This helps to catch and resolve common user errors without making server trips, reducing unnecessary server requests and improving the overall responsiveness of your application.

In this tutorial, you will learn how to implement form validation in Laravel 10 using jQuery for the client-side and Laravel’s built-in validation for the server-side.

Laravel 10 jQuery Form Validation Example Tutorial

Steps to validate form using jQuery validation library in laravel 10 applications:

Step 1: Create a Laravel Project
Step 2: Configure Database to App
Step 3: Create Routes
Step 4: Create Controller & Methods
Step 5: Create a Blade view
Step 6: Implementing Client-Side Validation with jQuery Validation
Step 7: Start Development Server

Step 1: Create a Laravel Project

First of all, Open the terminal or cmd and execute the following command on the terminal install and create a new Laravel project using Composer:

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

Step 2: Configure Database to App

Once you have successfully installed and created laravel project. Next, you need to configure the database with laravel app, so go to laravel project root directory and find .env file. Then setup database details like the following:

 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 Routes

Create two routes in the web.php file. Go to app/routes/web.php file and create two below routes here :

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

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

Route::post('/register', [UserController::class, 'register'])->name('register');

Step 4: Create Controller & Methods

Now, execute the following command on cmd and terminal to generate a UserController using Artisan:

php artisan make:controller UserController

In the register method of your UserController, implement server-side validation using Laravel’s validation rules. For example:

use Illuminate\Support\Facades\Validator;

public function register(Request $request)
{
    $validator = Validator::make($request->all(), [
        'name' => 'required|string|max:255',
        'email' => 'required|email|unique:users',
        'password' => 'required|string|min:8|confirmed',
    ]);

    if ($validator->fails()) {
        return redirect('/')
            ->withErrors($validator)
            ->withInput();
    }

    // User registration logic here

    return redirect('/')->with('success', 'Registration successful!');
}

Step 5: Create a Blade view

Create a form in your Laravel project. You can place it in a Blade view file. For this example, let’s create a simple registration form.

In resources/views/welcome.blade.php, add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 10 jQuery Form Validation - Tutsmake.com</title>
    <!-- Include jQuery library -->
  <!-- Add these lines to your app.blade.php layout -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
</head>
<body>

<div class="container">
    <form id="registrationForm" method="POST" action="{{ route('register') }}">
        @csrf

        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" class="form-control" required>
            @error('name')
                <div class="text-red-500">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" class="form-control" required>
            @error('email')
                <div class="text-red-500">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" class="form-control" required>
            @error('password')
                <div class="text-red-500">{{ $message }}</div>
            @enderror
        </div>

        <div class="form-group">
            <label for="password_confirmation">Confirm Password</label>
            <input type="password" id="password_confirmation" name="password_confirmation" class="form-control" required>
        </div>

        <button type="submit" class="btn btn-primary">Register</button>
    </form>
</div>

</body>
</html>

Then, You can also add code in welocme.blade.php to display success messages in your view after a successful registration. For example:

@if (session('success'))
    <div class="text-green-500">{{ session('success') }}</div>
@endif

Step 6: Implementing Client-Side Validation with jQuery Validation

In your resources/views/welocme.blade.php file, add the following script to perform client-side validation using jQuery Validation:

<script>
    $(document).ready(function() {
        $("#registrationForm").validate({
            rules: {
                name: "required",
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    minlength: 6
                },
                password_confirmation: {
                    required: true,
                    equalTo: "#password"
                }
            },
            messages: {
                name: "Please enter your name",
                email: {
                    required: "Please enter your email address",
                    email: "Please enter a valid email address"
                },
                password: {
                    required: "Please enter a password",
                    minlength: "Your password must be at least 6 characters long"
                },
                password_confirmation: {
                    required: "Please confirm your password",
                    equalTo: "Passwords do not match"
                }
            },
            errorElement: "div",
            errorPlacement: function(error, element) {
                error.insertAfter(element);
            }
        });
    });
</script>

Step 7: Run Development Server

Execute the following command on cmd or terminal to start the application server :

php artisan serve

Now hit the following url on the browser to run laravel application.

http://localhost:8000

Conclusion

That’s it! You’ve created a Laravel 10 application with jQuery form validation. Users will now receive both client-side and server-side validation feedback when submitting the registration form.