Recaptcha plugin

Shows and validates a Google reCAPTCHA v2

Usage

To use it, you need to register a site and secret keys at https://www.google.com/recaptcha/admin.

The following piece of code is the starting point to use the Recaptcha plugin:




    


    
...
document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { ..., recaptcha: new FormValidation.plugins.Recaptcha({ element: 'captchaContainer', language: ..., message: ..., siteKey: ..., theme: ..., }), }, } ); });

The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.

Options

Option Type Description
backendVerificationUrl String The URL of your back-end that verifies the captcha via reCAPTCHA API
badge String

The position of invisible reCAPTCHA. It can be one of

  • bottomright (the default value)
  • bottomleft
  • inline

Use this option along with size: 'invisible' for invisible reCAPTCHA

element * String The ID of element showing the captcha
language String The language code defined by reCAPTCHA
message * String The invalid message that will be shown in case the captcha is not valid
siteKey * String The site key provided by Google
size String

The size of reCAPTCHA widget. It can be one of

  • normal (the default value)
  • compact
  • invisible

The first two options are available for the reCAPTCHA widget. The last one has to be used if you want to use invisible reCAPTCHA.

theme String

The theme name provided by Google. It can be one of

  • light (the default value)
  • dark

reCAPTCHA widget

The following form shows a reCAPTCHA widget.

Invisible reCAPTCHA

The following form shows an invisible reCAPTCHA. In order to use it properly, remember to set the size: 'invisible' option.

Back-end verification

If you want to take more steps of checking if the visitor on your site isn't a robot, then let's verify the captcha on the back-end side.

You need to point the backendVerificationUrl option to your back-end URL:


FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            ...
        },
        plugins: {
            ...
            recaptcha: new FormValidation.plugins.Recaptcha({
                backendVerificationUrl: '/path/to/your/back-end/',
            }),
        },
    }
);

When that option is enabled, the plugin will send an Ajax request with the value for g-recaptcha-response parameter. With the value of captcha and the reCAPTCHA secret key, you can connect to reCAPTCGA verification URL to verify the captcha.

In order to inform user in case the captcha is valid or invalid, the back-end has to return a JSON encoded version of


{
    "success": "true"
}
// or
{
    "success": "false"
}

The following code demonstrates how to do it in PHP, but you can do it with your favorite language.


<?php
// Replace it with your reCAPTCHA secret key
$secretKey = '...';

// See https://developers.google.com/recaptcha/docs/verify#api-request
$fields = array(
    'secret'   => $secretKey,
    'response' => $_POST['g-recaptcha-response']
);

$postVars = '';
$sep = '';
foreach ($fields as $key => $value) {
    $postVars .= $sep . urlencode($key) . '=' . urlencode($value);
    $sep = '&';
}

$ch = curl_init();

curl_setopt($ch,CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify');
curl_setopt($ch,CURLOPT_POST, count($fields));
curl_setopt($ch,CURLOPT_POSTFIELDS, $postVars);
curl_setopt($ch,CURLOPT_RETURNTRANSFER, true);

$result = curl_exec($ch);

curl_close($ch);

header('Content-Type: application/json');
echo $result;

Changelog

  • v1.1.0:
    • Removed the timeout option. The captcha expiration will be handled by the plugin automatically
    • Removed unused stoken option
    • Added backendVerificationUrl option to support back-end verification
    • Supported invisible reCAPTCHA
  • v1.0.0: First release