11-Apr-2023
.
Admin
Hi Dev,
In this tutorial, I am going to learn you client side jquery validation in laravel 9. We will implement a client side jquery validation example for beginners in laravel 9 application. I will give you a simple example of client side jquery validation in laravel 9. you will learn client side jquery validation in laravel 9.
we always love add frontend jquery validation on a registration page or product create a page, because we don't require to request on server and then page refresh again and show to user. It would be great if you use jquery front end validation before submit to server. It will help to server load time and show you a quick errors on front side form.
Here I will give you full example for how to client side jquery validation in laravel 9. So, let's follow few step to create example of laravel 9 client side jquery validation tutorial.
Step 1: Download Laravel
Let us begin the tutorial by installing a new laravel application. if you have already created the project, then skip following step.
composer create-project laravel/laravel example-app
Step 2: Database Configuration
In second step, we will make database Configuration for example database name, username, password etc for file upload example of laravel 9 So lets open .env file and all deatils like as bellow:
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name(blog)
DB_USERNAME=here database username(root)
DB_PASSWORD=here database password(root)
Step 3: Add Route
Here, we need to add route for client side jquery validation. so open your "routes/web.php" file and add following route.
routes/web.php
<?php
use App\Http\Controllers\HomeController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('jquery-validation', [HomeController::class, 'jqueryValidation']);
Step 4: Add Controller
In this step, now we should create new controller as HomeController. So run bellow command and create new controller. bellow controller for create HomeController.
php artisan make:controller HomeController
After bellow command you will find new file in this path "app/Http/Controllers/HomeController.php".
So, let's copy bellow code and put on HomeController.php file.
app/Http/Controllers/HomeController.php
<?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');
}
}
Step 5: Add Blade Files
In last step. In this step we have to create just blade files. So mainly we have to create jqueryValidation file. So finally you have to create one following bellow blade file:
1) jqueryValidation.blade.php
So let's just create following file and put bellow code.
resources/views/jqueryValidation.blade.php
resources/views/jqueryValidation.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Client Side Form Validation using jQuery in Laravel 9 - NiceSnippets.com</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="//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>
<style type="text/css">
body{
background: #ddd;
}
.container{
background: #fff;
margin-top:100px;
}
.error{
color:red;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">Client Side Form Validation using jQuery in Laravel 9 - NiceSnippets.com </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>
<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>
</body>
</html>
Run Laravel App:
All steps have been done, now you have to type the given command and hit enter to run the laravel app:
php artisan serve
Now, you have to open web browser, type the given URL and view the app output:
http://localhost:8000/jquery-validation
It will help you....
#Laravel 9
