Captcha

Bootstrap 5 Captcha plugin

Captcha is a form validation component based on Recaptcha. It protects you against spam and other types of automated abuse.
Official documentation.

Note: Read the API tab to find all available options and advanced customization

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

Basic example

Edit in sandbox

Note: You need to include Google API script in your project in order to Captcha to work. 

<script src="https://www.google.com/recaptcha/api.js"></script>

<div class="captcha" data-mdb-captcha-init data-mdb-sitekey="YOUR_SITEKEY"></div>

Dark theme example

You can use dark theme by adding data-mdb-theme="dark".

Edit in sandbox 
<script src="https://www.google.com/recaptcha/api.js"></script>

<div class="captcha" data-mdb-captcha-init data-mdb-sitekey="YOUR_SITEKEY" data-mdb-theme="dark"></div>

Captcha - API

Import

Edit in sandbox 
import Captcha from 'mdb-captcha';
@import '~mdb-captcha/css/captcha.min.css';

Usage

Via data attributes

Using the Captcha plugin doesn't require any additional JavaScript code - simply add data-mdb-captcha-init attribute to .captcha and use other data attributes to set all options.

Edit in sandbox 
<div class="captcha" data-mdb-captcha-init data-mdb-sitekey="YOUR_SITEKEY"></div>

Via JavaScript

Edit in sandbox 
const element = document.querySelector('.captcha');
const instance = new Captcha(element);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
$(document).ready(() => {
  $('.captcha').captcha();
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-sitekey="".

Name Type Values Default Description
sitekey String - '' Required. Defines your sitekey.
theme String 'light'
'dark' 		'light' Optional. Defines theme for Captcha.
size String 'normal'
'compact' 		'normal' Optional. Defines the size of the widget.
tabindex Number - 0 Optional. Defines the tabindex of the widget and chellenge. If other elements in your page use tabindex, it should be set to make user navigation easier.
lang String 'pl', 'en', 'es' etc. 'en' Optional. Defines the language of the widget.

Methods

Name Parameters Description Example
reset - Reset the Captcha plugin instance.reset()
getResponse - Returns Captcha response key instance.getResponse()
dispose Removes the mdb.Captcha instance. instance.dispose()
getInstance element Static method which allows to get the captcha instance associated with a DOM element. mdb.Captcha.getInstance(element)
Edit in sandbox 
const captchaElement = document.querySelector('.captcha');
const instance = Captcha.getInstance(captchaElement);
instance.reset()

Events

Name Description
captchaExpire.mdb.captcha This event is emitted when CAPTCHA encounters an error.
captchaError.mdb.captcha This event is emitted when CAPTCHA response expires and the user needs to solve a new CAPTCHA.
captchaSuccess.mdb.captcha This event is emitted when user submits a successful CAPTCHA response.
Edit in sandbox 
document.querySelector('.captcha').addEventListener('captchaExpire.mdb.captcha', (e) => {
  // do something...
})