This add-on adds and validates Google reCAPTCHA v2 element.
If you still want to use Google reCAPTCHA v1, you can use the recaptcha1
Follow these steps to use this add-on:
You need to register a site and secret keys at https://www.google.com/recaptcha/admin.
reCaptcha requires more steps to display the captcha which are
- Insert the Google reCaptcha API script to the page
data-sitekey attribute to the element
You DO NOT have to do these steps because they are done automatically by the add-on.
In short, all you need are the site and secret keys provided by reCaptcha.
Including the add-on
- Download reCaptcha2 add-on
reCaptcha2.min.js (located in the
dist directory) to your page. Ensure that it's placed after
Calling the add-on
It's possible to call the add-on in both programmatic and declarative ways:
If you want to use multiple add-ons, just simply separate them by a comma in data-fv-addons attribute:
data-fv-addons="i18n, mandatoryIcon, recaptcha2"
The reCaptcha2 add-on provides the following options:
* — Required option
|Option ||HTML attribute ||Type ||Description |
|The ID of element showing the captcha |
|The language code defined by reCAPTCHA |
|The error message that will be shown in case the captcha is not valid. You don't need to define it if the back-end URL above returns the message |
|The site key provided by Google |
|The secure token |
The theme name provided by Google. It can be one of
|The number of seconds that session will expire. After this amount of time, you will be asked to enter a new captcha. The default value is 120 (2 minutes) |
Following is the list of methods provided directly by
reset(element*) — Reset the captcha element. It reset the checkbox captcha element and generate a new captcha.
* — Required option
|Parameter ||Type ||Description |
|String ||The ID of element showing the captcha |
This method doesn't remove the feedback icon and validation messages of captcha. To do that, you need to call the resetForm() or resetField() method.
See the Resetting the captcha for a simple usage.
Below is the piece of code showing programmatic and declarative usages:
Showing message in a custom area
It's possible to place error message of the captcha in a custom area by using the err option.
Behind the scenes, the captcha field's name generated by Google reCaptcha is
g-recaptcha-response, so we can apply the
err option for this field as usual:
Don't forget to wrap the captcha field's name (g-recaptcha-response) between single or double quote. See the Validating field with special name
example for more use cases.
Resetting the captcha
If you want to reset the entire form including the feedback icon and messages, calling resetForm() doesn't enough.
In addition to that, we also need to call the reset() method:
Click the Reset button in the example above to see how it works.
- v0.4.0: Add
reset() method to reset the captcha element
- v0.3.1: Add
- Support multiple reCAPTCHA v2 elements on the same page
- Add Grunt build and minified files
- v0.2.0: Add localization support
- v0.1.0: First release