Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
How to Add Captcha, validate and refresh captcha in Laravel Form

How to Add Captcha, validate and refresh captcha in Laravel Form ?

Aman Jain, March 10, 2022November 17, 2023

Captcha is used to enhance the security of form. By adding the Captcha in laravel form we can prevent attackers to submit the form using the automated scripts and it adds an extra layer of security. To add the captcha in laravel form we can use package mews/captcha, its easy to use and also provide validation rule to validate the captcha.

mews/captcha gives multiple options to use and we can also configure it according to our need. Using the captcha package we can use it stateless and session mode means we can use it using laravel session and without the session , without session it uses a key in request to validate the captcha.

This package also provide the configure the math in captcha, length of captcha and expiry time of captcha therefore we can configure all these things in config file of it.

So let’s install or add captcha in laravel form with example

Screenshot 2022 03 10 at 8.25.29 AM
Captcha in laravel

Step 1 : Install the package

I assume the you have already installed the laravel and basic connection of it like database connection and composer.

Now install the package using composer in laravel root directory, open the terminal in laravel root directory and run below command

composer require mews/captcha

And then run composer update

composer update

Also make sure you have gd, file_info and mbstring extension are loaded

How to check a PHP extension is installed and enabled ?

To check whether a module is enables or not we can check in terminal by below command wil give you all installed php module

php -m

you can also check in php file

<?php 
      echo "<pre>";
      print_r(get_loaded_extensions());
      echo "<pre/>";
 ?>

Step 2 : Add Service provider and alias

Most of the packages comes with laravel package discovery enabled and automatic add service provider to packages built after laravel 5.5 so if your laravel version is greater then 5.5 then you can skip this step.

Search for providers key and Add service provider in config\app.php

'providers' => [
        // ...
        Mews\Captcha\CaptchaServiceProvider::class,,
    ]

Also find alias key and add as below

aliases' => [
        // ...
        'Captcha' => Mews\Captcha\Facades\Captcha::class,
    ]

Step 3 : Publish config to add configuration

Now, publish the config of package so we can change the config according to need. Run the below command in project directory

php artisan vendor:publish

this will create an file inconfig/captcha.php

return [
    'default'   => [
        'length'    => 5,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
        'math'      => true,  //Enable Math Captcha
        'expire'    => 60,    //Stateless/API captcha expiration
    ],
    // ...
];

Step 4 : Create routes

Add appropriate routes to connect our URL to controller therefore open routes/web.php and add below routes

<?php
use Illuminate\Support\Facades\Route;
use \App\Http\Controllers\PostController;


Route::get('/create-post',[PostController::class, 'create']);
Route::post('/submit-post',[PostController::class, 'store']);
Route::get('/refresh-captcha', [PostController::class, 'refreshCaptcha']);

Here we created three routes one create-post to show the form, submit-post to submit the form and refresh-captcha to refresh captcha again.

Step 4 : Create Controller

Now, create the controller as we have mentioned in routes is PostController and also create three methods create, store and refreshCaptcha so create a file in app\Http\Controllers\PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;


class PostController extends Controller
{

    public function create()
    {
        return view('post.create-post');
    }

    public function store(Request $request)
    {
        $validator = Validator::make(
            $request->all(),
            [
                'email' => 'required|email',   // required and email format validation
                'phone_number' => 'required|numeric|digits_between:9,15', // required and number field validation
                'username' => ['required'],
                'password' => 'required',
                'password_confirmation' => 'required|same:password',
                'captcha' => 'required|captcha'

            ],
            ['captcha.captcha' => 'Enter valid captcha code shown in image']
        ); // create the validations

        if ($validator->fails())   //check all validations are fine, if not then redirect and show error messages
        {
            return back()->withInput()->withErrors($validator);
        } else {
            return response()->json(["status" => true, "message" => "Form submitted successfully"]);
        }
    }
    public function refreshCaptcha()
    {
        return response()->json(['captcha' => captcha_img()]);
    }
}

as you can see we have added the validation for captcha here

  $validator = Validator::make($request->all(), [
            ....
            'captcha' => 'required|captcha'

        ],['captcha.captcha' => 'Enter valid captcha code shown in image']); // create the validations

and to refresh the captcha we used refreshCaptcha method.

Step 5 : Create view

We have create the controller and logic for validate the captcha now its time to show the captcha in form and submit to store method hence here is our view

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Readerstacks add captcha, refresh captcha and validate example in laravel</title>

  <link href="//netdna.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body class="antialiased">
  <div class="container">
    <!-- main app container -->
    <div class="readersack">
      <div class="container">
        <div class="row">
          <div class="col-md-6 offset-md-3">
            <h3> Add captcha, refresh captcha and validate example in laravel - Readerstacks</h3>

            <form method="post" id="validateajax" action="{{url('submit-post')}}" name="registerform">
              <div class="form-group">
                <label>Email</label>
                <input type="text" name="email" value="{{ old('email') }}" class="@error('email') is-invalid @enderror form-control" />

                @error('email')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
                @csrf
              </div>
              <div class="form-group">
                <label>Phone number</label>
                <input type="text" name="phone_number" value="{{ old('phone_number') }}" class="@error('phone_number') is-invalid @enderror form-control" />
                @error('phone_number')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
              </div>
              <div class="form-group">
                <label>Username</label>
                <input type="text" name="username" value="{{ old('username') }}" class="@error('username') is-invalid @enderror form-control" />
                @error('username')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
              </div>
              <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" class="@error('password') is-invalid @enderror form-control" />
                @error('password')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
              </div>
              <div class="form-group">
                <label>Confirm Password</label>
                <input type="password" name="password_confirmation" class="@error('password_confirmation') is-invalid @enderror form-control" />
                @error('password_confirmation')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
              </div>
              <div class="form-group">
                <label for="capatcha">Captcha</label>
                <div class="captcha">
                  <span>{!! captcha_img() !!}</span>
                  <button type="button" class="btn btn-success refresh-cpatcha"><i class="fa fa-refresh"></i></button>
                </div>
                <input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha">
                @error('captcha')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
              </div>
              <div class="form-group">
                <button class="btn btn-primary">Register</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- credits -->
    <div class="text-center">
      <p>
        <a href="#" target="_top">Add captcha, refresh captcha and validate example in laravel - Readerstacks</a>
      </p>
      <p>
        <a href="https://readerstacks.com" target="_top">readerstacks.com</a>
      </p>
    </div>
  </div>
</body>

<script type="text/javascript">
  $(".refresh-cpatcha").click(function() {
    $.ajax({
      type: 'GET',
      url: "{{url('refresh-captcha')}}",
      success: function(data) {
        $(".captcha span").html(data.captcha);
      }
    });
  });
</script>

</html>

Here, we used {!! captcha_img() !!} to show the captcha and @error('captcha') to show the validations

 <div class="form-group">
                <label for="capatcha">Captcha</label>
                <div class="captcha">
                  <span>{!! captcha_img() !!}</span>
                  <button type="button" class="btn btn-success refresh-cpatcha"><i class="fa fa-refresh"></i></button>
                </div>
                <input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha">

                @error('captcha')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
  </div>

and to show the refresh button we used this script

<script type="text/javascript">
  $(".refresh-cpatcha").click(function() {
    $.ajax({
      type: 'GET',
      url: "{{url('refresh-captcha')}}",
      success: function(data) {
        $(".captcha span").html(data.captcha);
      }
    });
  });
</script>

Now serve the project using

php artisan serve

and check the implementation.

Screenshot :

Screenshot 2022 03 10 at 8.25.29 AM 2
Screenshot 2022 03 10 at 8.25.46 AM
Laravel captcha , captcha validation and refresh captcha

Related

Php Laravel Laravel 9 captchaformlaravelrefreshvalidation

Post navigation

Previous post
Next post

Related Posts

Php How to change data type of column in laravel migration

How to change data type of column in laravel migration ?

February 20, 2022November 5, 2023

In this blog post we will learn to change data type of column in laravel migration. Laravel covers most of the migration features like add, delete, indexing etc. but to modify the table like renaming column, change data type column to existing table laravel uses a separate package doctrine/dbal. In…

Read More

Sharing variables between all views in laravel 8

January 15, 2022January 15, 2022

In laravel its easy to share varible from controller to view using view function but sometimes we need to share some specific information to all pages of our website for examle sharing the site settings, user info etc. so in this case we require to share a varible across the…

Read More
Laravel How to get laravel application root path

How to get laravel application root path ?

October 13, 2022March 16, 2024

In this blog post, we’ve shown you how to get laravel application root path directory. If you need to get the path from anywhere in your application, you can use the Laravel public_path() helper function. If you need to get the path to your application’s storage directory, you can use…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Understanding High Vulnerabilities: A Deep Dive into Recent Security Concerns
  • Understanding High Vulnerabilities in Software: A Week of Insights
  • Blocking Spam Requests with LaraGuard IP: A Comprehensive Guide
  • Enhancing API Development with Laravel API Kit
  • Exploring the Future of Web Development: Insights from Milana Cap
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version