In this tutorial you will learn about the Laravel 9 Client Side Form Validation Using jQuery and its application with practical example.
In this Laravel 9 Client Side Form Validation Using jQuery tutorial I will show you how to apply client side form validation using jquery form validation plugin. In this tutorial you will learn to implement client side form validation using jquery form validation plugin in laravel 9
Laravel 9 Client Side Form Validation
In this article I’ll share example to implement client side validation in laravel 9 application using Jquery Form Validation plugin. In this tutorial, you will learn to validate the form data in the client side before it is submitted to server. When the form data satisfies the validation it will submitted to server for further processing.
Laravel 9 Client Side Form Validation Using jQuery
In this step by step tutorial I will demonstrate you with example how to implement client side form validation in laravel 9 application using jQuery. Please follow the instruction given below:
- Install Laravel 9
- Setup Database
- Make Route
- Create Controller & Methods
- Create Blade View
- Start Development Server
Install Laravel 9
First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command
|
1 |
composer create-project --prefer-dist laravel/laravel larablog |
Database Configuration
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=larablog DB_USERNAME=root DB_PASSWORD= |
Make Route
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 4 |
use App\Http\Controllers\HomeController; Route::get('jquery-validation', [HomeController::class, 'jqueryValidation']); |
Create Controller
Now, lets create a controller named HomeController using command given below –
|
1 |
php artisan make:controller HomeController |
After successfully create controller go to app/controllers/HomeController.php and put the below code :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class HomeController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function jqueryValidation() { return view('jqueryValidation'); } } |
Create Blade view
In this step, we will create a blade file. Go to app/resources/views and create one file name jqueryValidation.blade.php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Client Side Form Validation using jQuery in Laravel 9</title> <link rel="stylesheet" href="{{asset('css/app.css')}}"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <style type="text/css"> body{ background: #ddd; } .container{ background: #fff; margin-top:100px; } .error{ color:red; } </style> <body> <div class="container"> <h2 class="text-center">Client Side Form Validation using jQuery in Laravel 9</h2><br/> <form method="" action="" id="form"> @csrf <div class="row"> <div class="col-md-3"></div> <div class="form-group col-md-6"> <label for="Name">Name:</label> <input type="text" class="form-control" name="name"> </div> </div> <div class="row"> <div class="col-md-3"></div> <div class="form-group col-md-6"> <label for="Email">Email:</label> <input type="text" class="form-control" name="email"> </div> </div> <div class="row"> <div class="col-md-3"></div> <div class="form-group col-md-6"> <label for="Number">Phone Number:</label> <input type="text" class="form-control" name="number"> </div> </div> <div class="row"> <div class="col-md-3"></div> <div class="form-group col-md-6" style="margin-top:10px"> <button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </div> </body> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> <script> $(document).ready(function () { $('#form').validate({ rules: { name: { required: true }, email: { required: true, email: true }, number: { required: true, digits: true }, }, errorElement: 'span', errorPlacement: function (error, element) { error.addClass('invalid-feedback'); element.closest('.form-group').append(error); }, highlight: function (element, errorClass, validClass) { $(element).addClass('is-invalid'); }, unhighlight: function (element, errorClass, validClass) { $(element).removeClass('is-invalid'); } }); }); </script> </html> |
Start Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
|
1 |
http://localhost:8000/jquery-validation |
