Laravel Client Side Form Validation Using jQuery

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=3306
DB_DATABASE=form
DB_USERNAME=root
DB_PASSWORD=

Set up local database credentials.

Migrate two tables provided by Laravel, move to your terminal, and type the following command.

php artisan migrate

It will create two tables in your database.

  1. users
  2. password_resets 

Step 3: Define a model, migration file, and controller

It will create two files.

  1. Form.php model.
  2. create_forms_table migration file.
// create_forms_table

public function up()
    {
        Schema::create('forms', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->integer('number');
            $table->integer('minlength');
            $table->integer('maxlength');
            $table->integer('minvalue');
            $table->integer('maxvalue');
            $table->integer('range');
            $table->string('url');
            $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="{{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>
  <body>
    <div class="container">
      <h2>Form Validation using jQuery</h2><br/>
      <form method="post" action="{{url('forms')}}" 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">
              <label for="Min Length">Min Length(minium 5):</label>
              <input type="text" class="form-control" name="minlength">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="form-group col-md-4">
              <label for="Max Length">Max Length(maximum 8):</label>
              <input type="text" class="form-control" name="maxlength">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="form-group col-md-4">
              <label for="Min Value">Min Value(minium 1):</label>
              <input type="text" class="form-control" name="minvalue">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="form-group col-md-4">
              <label for="Max Value">Max Value(maximum value 100):</label>
              <input type="text" class="form-control" name="maxvalue">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="form-group col-md-4">
              <label for="Range">Range(minium 20, maximum 40):</label>
              <input type="text" class="form-control" name="range">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="form-group col-md-4">
              <label for="Range">URL:</label>
              <input type="text" class="form-control" name="url">
            </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" style="margin-top:60px">
            <button type="submit" class="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    </div>
  </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.

Route::resource('forms','FormController');

Turn to your terminal and type the following command.

php artisan route:list

The next step would be to go to the FormController.php file and add some code into create() function.

// FormController.php

  /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    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/forms/create

Step 6: Initialize jQuery Plugin.

Now we can add the jQuery Plugin to the file.

//create.blade.php
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.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
                
            },
            minlength: {
                required: true,
                minlength: 5
                
            },
            maxlength: {
                required: true,
                maxlength: 8
                
            },
            minvalue: {
                required: true,
                min: 1
                
            },
            maxvalue: {
                required: true,
                max: 100
                
            },
            range: {
                required: true,
                range: [20, 40]
                
            },
            url: {
            required: true,
            url: true
            },
            filename: {
                required: true,
                extension: "jpeg|png"
            },
        }
    });
});
</script>

Our final code of create.blade.php looks like this:

<!-- create.blade.php -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Form Validation using jQuery in Laravel</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>
  <body>
    <div class="container">
      <h2>Form Validation using jQuery</h2><br/>
      <form method="post" action="{{url('forms')}}" 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">
              <label for="Min Length">Min Length(minium 5):</label>
              <input type="text" class="form-control" name="minlength">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="form-group col-md-4">
              <label for="Max Length">Max Length(maximum 8):</label>
              <input type="text" class="form-control" name="maxlength">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="form-group col-md-4">
              <label for="Min Value">Min Value(minium 1):</label>
              <input type="text" class="form-control" name="minvalue">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="form-group col-md-4">
              <label for="Max Value">Max Value(maximum value 100):</label>
              <input type="text" class="form-control" name="maxvalue">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="form-group col-md-4">
              <label for="Range">Range(minium 20, maximum 40):</label>
              <input type="text" class="form-control" name="range">
            </div>
          </div>
          <div class="row">
            <div class="col-md-4"></div>
            <div class="form-group col-md-4">
              <label for="Range">URL:</label>
              <input type="text" class="form-control" name="url">
            </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" style="margin-top:60px">
            <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 src="https://cdn.jsdelivr.net/jquery.validation/1.16.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
                
            },
            minlength: {
                required: true,
                minlength: 5
                
            },
            maxlength: {
                required: true,
                maxlength: 8
                
            },
            minvalue: {
                required: true,
                min: 1
                
            },
            maxvalue: {
                required: true,
                max: 100
                
            },
            range: {
                required: true,
                range: [20, 40]
                
            },
            url: {
            required: true,
            url: true
            },
            filename: {
                required: true,
                extension: "jpeg|png"
            },
        }
    });
});
</script>
  </body>
</html>

Form Validation Using jQuery

Step 7: Save Data into Database.

//FormController.php
/**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $form= new Form();
        $form->name=$request->get('name');
        $form->email=$request->get('email');
        $form->number=$request->get('number');
        $form->minlength=$request->get('minlength');
        $form->maxlength=$request->get('maxlength');
        $form->minvalue=$request->get('minvalue');
        $form->maxvalue=$request->get('maxvalue');
        $form->url=$request->get('url');
        $form->filename=$request->get('filename');
        $form->save();
        return redirect('forms')->with('success', 'Data has been added');
    }

That’s it for this tutorial.

1 thought on “Laravel Client Side Form Validation Using jQuery”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.