Laravel 8 Client Side JQuery Validation Example

Laravel 8 , Laravel 7 , Laravel , Laravel 6

Nicesnippets

2048

07-05-2021


Laravel 8 Client Side JQuery Validation Example

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="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 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....


Recommended Posts