11-Apr-2023
.
Admin
.png)
Hi Dev,
In this tutorial, I am going to learn you client side jquery validation in laravel 8. We will implement a client side jquery validation example for beginners in laravel 8 application. i will give you simple example of client side jquery validation in laravel 8. you will learn client side jquery validation in laravel 8.
we always love add frontend jquery validation on registration page or product create 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 8. So, let's follow few step to create example of laravel 8 client side jquery validation tutorial.
Step 1 : Install Laravel 8
In the first step, we need to get fresh laravel 8 version application So let's open terminal and run bellow command to install fresh laravel project.
composer create-project --prefer-dist laravel/laravel blog
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 8 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
use App\Http\Controllers\HomeController;
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 8 - 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>
</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 8 - 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>
</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>
Now we are ready to run client side jquery validation example with laravel 8 so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
localhost:8000/jquery-validation
It will help you....
#Laravel 8
#Laravel 7
#Laravel
#Laravel 6
