Google reCAPTCHA V2 Checkbox Client-Side Validation with Vanilla JavaScript

You can also check this repo. It includes a complete sample code of how server-side & client-side Google reCATPCHA V2 validations work.

Table of Contents

1. Installation
2. Data Attributes
3. YouTube Tutorials
   1. Client Side Validation
   2. Server Side Validation

---

Installation

$ git clone https://github.com/Tes3awy/recaptcha-vanilla-js.git
$ cd recaptcha-vanilla-js
$ code . # Only if you are using VSCode

To begin with, you MUST provide a sitekey in data-sitekey data attribute. This key is provided when you create a reCAPTCHA V2 Checkbox.

Data Attributes

data-sitekey="<SITE_KEY>" (Required)
data-theme="<THEME>" (Optional. Allowed values: "dark" or "light". Default: light)
data-size="<SIZE>" (Optional. Allowed values: "normal" or "compact". Default: normal)
data-callback="<CALLBACK_FUNCTION>" (Optional)
data-expired-callback="<EXPIRY_CALLBACK_FUNCTION>" (Optional)

I used Bootstrap v5.1.1 as the front-end library. And the bootstrap.min.css was downloaded from Bootswatch (Cosmos Theme)

---

YouTube Tutorials

Client Side Validation

You can also watch the client-side validation tutorial on

---

Server Side Validation

I made a tutorial about the server-side validation on . Grab your cup of coffee and enjoy watching!

---

For reference, please visit Google reCAPTCHA Developers Guide.