Here are the steps to create client-side form validation using jQuery in Laravel.
Step 1: Install Laravel Project
composer create-project --prefer-dist laravel/laravel FormValidation
Step 2: Set up a MySQL database in .env file
Configure the database in the .env file.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=8889 DB_DATABASE=form DB_USERNAME=root DB_PASSWORD=root
Set up local database credentials.
Migrate two tables provided by Laravel, move to your terminal, and type the following command.
php artisan migrate
Step 3: Define a model, migration file, and controller
Go to the terminal and type the following command:
php artisan make:model Form -m
It will create two files.
- Form.php model.
- create_forms_table migration file.
public function up(): void { Schema::create('forms', function (Blueprint $table) { $table->id(); $table->string('name'); $table->string('email')->unique(); $table->bigInteger('number'); $table->string('filename'); $table->timestamps(); }); }
Refresh the table with the following command.
php artisan migrate:refresh --seed
Step 4: Create one view file to add the information to the database
Create a file in the resources >> views >> create.blade.php and put the following code in it.
<!-- create.blade.php --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Form Validation using jQuery in Laravel</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js" integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Form Validation using jQuery</h2><br/> <form method="post"> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="Name">Name:</label> <input type="text" class="form-control" name="name"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="Email">Email:</label> <input type="text" class="form-control" name="email"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="Number">Phone Number:</label> <input type="text" class="form-control" name="number"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <input type="file" name="filename"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </body> </html>
Step 5: Create one controller and route
php artisan make:controller FormController --resource
It will create one controller file called FormController.php
Define one route in routes >> web.php file.
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\FormController; Route::get('/', function () { return view('welcome'); }); Route::get('form', [FormController::class, 'create'])->name("form.create");
The next step is to go to the FormController.php file and add some code to the create() function.
//FormController.php public function create() { return view('create'); }
We need to start a Laravel Development server. So in the terminal, type the subsequent command.
php artisan serve
Move to the browser and follow this URL: http://localhost:8000/form
Step 6: Initialize jQuery Plugin
Now we can add the jQuery Plugin to the file.
<script> $(document).ready(function () { $('#form').validate({ // initialize the plugin rules: { name: { required: true }, email: { required: true, email: true }, number: { required: true, digits: true }, filename: { required: true, extension: "jpeg|png" }, } }); }); </script>
Our final code of create.blade.php looks like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Form Validation using jQuery in Laravel</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js" integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h2>Form Validation using jQuery</h2><br/> @if(session('success')) <div class="alert alert-success"> {{ session('success') }} </div> @endif <form method="post" action="{{url('form')}}" id="form"> @csrf <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="Name">Name:</label> <input type="text" class="form-control" name="name"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="Email">Email:</label> <input type="text" class="form-control" name="email"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <label for="Number">Phone Number:</label> <input type="text" class="form-control" name="number"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <input type="file" name="filename"> </div> </div> <div class="row"> <div class="col-md-4"></div> <div class="form-group col-md-4"> <button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.20.0/jquery.validate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.20.0/additional-methods.min.js"></script> <script> $(document).ready(function () { $('#form').validate({ // initialize the plugin rules: { name: { required: true }, email: { required: true, email: true }, number: { required: true, digits: true }, filename: { required: true, extension: "jpeg|png" }, } }); }); </script> </body> </html>
Step 7: Save Data into Database
//FormConroller.php use App\Models\Form; public function store(Request $request) { $form= new Form(); $form->name=$request->get('name'); $form->email=$request->get('email'); $form->number=$request->get('number'); $form->filename=$request->get('filename'); $form->save(); return redirect('form')->with('success', 'Data has been added'); }
Our forms table looks like this:
That’s it for this tutorial.
Raheel Ahmed
Boss what about unique email address