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

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-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-sitekey="YOUR_SITEKEY" data-mdb-theme="dark"></div>

Captcha - API

Usage

Via data attributes

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

Via JavaScript

Edit in sandbox 
        
            
        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.

Edit in sandbox 
        
            
        $(document).ready(() => { 
          $('.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)
Edit in sandbox 
        
            
        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
Edit in sandbox 
        
            
          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:

Edit in sandbox 
        
            
        import Captcha from 'mdb-captcha';