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

Basic example

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

Dark theme example

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

Captcha - API

Usage

Via data attributes

HTML


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

Via JavaScript

JavaScript


        const captchaElement = document.querySelector('.captcha');
        const instance = Captcha.getInstance(captchaElement);

Via jQuery

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

jQuery


        $('.captcha').captcha();

Options

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

Name	Type	Values	Default	Description
`sitekey`	String	-	`null`	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)`

JavaScript


        const captchaElement = document.querySelector('.captcha');
        const instance = Captcha.getInstance(captchaElement);
        instance.reset()

Events

Name	Description
`onExpire.mdb.captcha`	Emmited when CAPTCHA encounters an error.
`onError.mdb.captcha`	Emmited when CAPTCHA response expires and the user needs to solve a new CAPTCHA.
`onSuccess.mdb.captcha`	Emmited when user submits a successful CAPTCHA response

JavaScript


          document.querySelector('.captcha').addEventListener('onExpire.mdb.captcha', (e) => {
            // do something...
          })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

JavaScript


        import Captcha from 'mdb-captcha';