---
description: https://laratutorials.com/laravel-8-jquery-validation-tutorial-example/
---

# Laravel 8 jQuery Validation Tutorial Example

jQuery form validation in laravel 8. In this simple example post, i will show from scratch on how to use jQuery validation in laravel 8.

In this post example, i will create product add form and validate form data before submit using jQuery validation library. And as well as before store into database.

### Form Validation using jQuery in Laravel 8

* Step 1 – Install **Laravel 8** Application
* Step 2 – Configuring Database using Env File
* Step 3 – Create Model & Migration File For Product Add Form
* Step 4 – Create Routes
* Step 5 – Creating Controller
* Step 6 – Create Blade File For Product Add Form
* Step 7 – Start Development Server
* Step 8 – Run Laravel 8 jQuery Form Validation App On Browser

#### Step 1 – Install Laravel 8 Application

In step 1, open your terminal and navigate to your local web server directory using the following command:

```
//for windows user
cd xampp/htdocs

//for ubuntu user
cd var/www/html
```

Then install laravel 8 latest application using the following command:

```
composer create-project --prefer-dist laravel/laravel LaraveljQuery
```

#### Step 2 – Configuring Database using Env File

In step 2, open your downloaded laravel 8 app into any text editor. Then find .env file and configure database detail like following:DB\_CONNECTION=mysqlDB\_HOST=127.0.0.1DB\_PORT=3306DB\_DATABASE=db nameDB\_USERNAME=db user nameDB\_PASSWORD=db password

#### Step 3 – Create Model & Migration File For Product Add Form

In step 3, open command prompt and navigate to your project by using the following command:

```
cd / LaraveljQuery
```

Then create model and migration file by using the following command:

```
php artisan make:model Product -m
```

The above command will create two files into your laravel 8 form validation application, which is located inside the following locations:

* LaraveljQuery/app/Models/Product.php
* LaraveljQuery/database/migrations/create\_products\_table.php

So, find **create\_products\_table.php** file inside **LaravelForm/database/migrations/** directory. Then open this file and add the following code into **function up()** on this file: public function up() { Schema::create('products', function (Blueprint $table) { $table->id(); $table->string('title'); $table->string('code'); $table->text('description'); $table->timestamps(); }); }

Now, open again your terminal and type the following command on cmd to create tables into your selected database:

```
php artisan migrate
```

#### Step 4 – Create Routes

In step 4, open your web.php file, which is located inside routes directory. Then add the following routes into web.php file:\<?phpuse Illuminate\Support\Facades\Route;use App\Http\Controllers\ProductController;/\*|--------------------------------------------------------------------------| 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('/', function () { return view('welcome');});Route::get('jquery-validation', \[ProductController::class, 'index']);Route::post('store-product', \[ProductController::class, 'store']);

#### Step 5 – Creating Controller

In step 5, create form controller by using the following command:

```
php artisan make:controller ProductController
```

The above command will create **ProductController.php** file, which is located inside **LaraveljQuery/app/Http/Controllers/** directory.

The following laravel validation rules will validate form data on server side in laravel: $validatedData = $request->validate(\[ 'title' => 'required|unique:posts|max:255', 'code' => 'required|unique:posts|max:255', 'description' => 'required', ]);

So open **ProductController**.php file and add the following code into it:\<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;use App\Models\Product;class ProductController extends Controller{ public function index() { return view('product'); } public function store(Request $request) { $validatedData = $request->validate(\[ 'title' => 'required|unique:posts|max:255', 'code' => 'required|unique:posts|max:255', 'description' => 'required', ]); $product = new Product; $product->title = $request->title; $product->code = $request->code; $product->description = $request->description; $product->save(); return redirect('jquery-validation')->with('status', 'Product Has Been Added'); \}}

#### Step 6 – Create Blade File For Product Add Form

In step 6, create new blade view file that named **product.blade.php** inside **resources/views directory** for add add product form.

The following code display error message in laravel forms. So do not forget to add the following code along laravel forms fields: @error('title') \<div class="alert alert-danger mt-1 mb-1">\{{ $message \}}\</div> @enderror

And the following jQuery code will validate form data on client side or before submit to controller or database:\<script> if ($("#product-add").length > 0) { $("#product-add").validate({ rules: { title: { required: true, maxlength: 50 }, code: { required: true, }, description: { required: true, }, }, messages: { title: { required: "Please enter title", }, code: { required: "Please enter valid email", }, description: { required: "Please enter message", }, }, }) } \</script>

Don’t worry i have already added the jQuery and server side validation error message display code along with each form fields.

So, you can add the following php and html form code into **product.blade.php**:\<!DOCTYPE html>\<html>\<head> \<title>Laravel 8 jQuery Validation Example Tutorial\</title> \<meta name="csrf-token" content="\{{ csrf\_token() \}}"> \<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> \<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">\</script> \<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js">\</script> \<style> .error{ color: #FF0000; } \</style>\</head>\<body>\<div class="container mt-4"> @if(session('status')) \<div class="alert alert-success"> \{{ session('status') \}} \</div> @endif \<div class="card"> \<div class="card-header text-center font-weight-bold"> \<h2>Laravel 8 jQuery Form Validation Before Submit\</h2> \</div> \<div class="card-body"> \<form name="product-add" id="product-add" method="post" action="\{{url('store-product')\}}"> @csrf \<div class="form-group"> \<label for="exampleInputEmail1">Title\</label> \<input type="text" id="title" name="title" class="@error('title') is-invalid @enderror form-control"> @error('title') \<div class="alert alert-danger mt-1 mb-1">\{{ $message \}}\</div> @enderror \</div> \<div class="form-group"> \<label for="exampleInputEmail1">Product Code\</label> \<input type="text" id="code" name="code" class="@error('code') is-invalid @enderror form-control"> @error('code') \<div class="alert alert-danger mt-1 mb-1">\{{ $message \}}\</div> @enderror \</div> \<div class="form-group"> \<label for="exampleInputEmail1">Description\</label> \<textarea name="description" class="@error('description') is-invalid @enderror form-control">\</textarea> @error('description') \<div class="alert alert-danger mt-1 mb-1">\{{ $message \}}\</div> @enderror \</div> \<button type="submit" class="btn btn-primary">Submit\</button> \</form> \</div> \</div>\</div>\<script> if ($("#product-add").length > 0) { $("#product-add").validate({ rules: { title: { required: true, maxlength: 50 }, code: { required: true, }, description: { required: true, }, }, messages: { title: { required: "Please enter title", }, code: { required: "Please enter valid email", }, description: { required: "Please enter message", }, }, }) } \</script>\</body>\</html>

#### Step 7 – Start Development Server

Finally, open your command prompt again and run the following command to start development server for your laravel 8 form application:

```
php artisan serve
```

#### Step 8 – Run Laravel 8 jQuery Form Validation App On Browser

In step 8, open your browser and fire the following url into your browser:

```
http://127.0.0.1:8000/jquery-validation
```

When you fire the above given url on browser, you will look like in the following image:![form validation using jquery in laravel](https://laratutorials.com/wp-content/uploads/2020/09/form-validation-using-jquery-in-laravel-1024x475.png)
