AppDividend
Latest Code Tutorials

jQuery Form Validation In Laravel

4,174

Get real time updates directly on you device, subscribe now.

jQuery Form Validation in Laravel Tutorial is today’s leading topic. Laravel 5.6 releases on February 7, 2018. Laravel is known as one of the most popular PHP frameworks. Laravel 5.6 provides several features like Bootstrap, New Blade Directive, API Controller Generation, etc.There are multiple jQuery plugins to validate the form.This jQuery plugin produces mild clientside form validation easy.These plugins have so many attribute alternative rules to authenticate form such as :

  • maxlength
  • minlength
  • minvalue
  • maxvalue
  • extension
  • ipv4
  • ipv6
  • integer
  • lettersonly
  • lessThan
  • lessThanEqual
  • maxfiles
  • maxsizes
  • maxsizetotal
  • require
  • mobileNL
  • mobileUK
  • notEqualTo
  • nowhitespace
  • pattern
  • phoneNL
  • phonePL
  • phoneUS
  • phoneUK
  • phonesUK
  • postalCodeCA
  • postalcodeIT
  • postalcodeBR
  • postalcodeUK
  • postalcodeNL
  • statesUS
  • time
  • zipcode
  • ziprange
  • vinUS
  • url2
  • time12h
  • creditcard
  • creditcardstype
  • currency
  • additional
  • alphanumeric

jQuery Form Validation

We use Laravel 5.6 and jQuery plugin to validate the form field.

Step 1: Install Laravel 5.6 Project.

Configure new Laravel Project to enter this command.

composer create-project --prefer-dist laravel/laravel FormValidation

Step 2: Setup 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=

Setup local database credentials.

Next, migrate two tables provided by Laravel 5.6 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.

Hit the following command in your terminal.

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 in 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');

Now, turn to your terminal and type the following command.

php artisan route:list

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

// FormController.php

  /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('create');
    }

We need to start 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.

Related Posts
1 of 39

Now we can add 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>

so our final code of create.blade.php looks like

<!-- 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.

We want to code the store function in flow to save the data in the 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');
    }

Finally, our jQuery Form Validation In Laravel Tutorial is over.

 

Leave A Reply

Your email address will not be published.

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