https://github.com/tes3awy/recaptcha-vanilla-js

Google reCAPTCHA V2 Client-Side Validation Only with Vanilla JavaScript
https://github.com/tes3awy/recaptcha-vanilla-js

bootstrap5 bots client-side google-recaptcha-v2 javascript tutorial

Last synced: about 2 months ago
JSON representation

Google reCAPTCHA V2 Client-Side Validation Only with Vanilla JavaScript

• Host: GitHub
• URL: https://github.com/tes3awy/recaptcha-vanilla-js
• Owner: Tes3awy
• License: mit
• Created: 2021-09-30T13:02:32.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-09-30T13:35:05.000Z (over 4 years ago)
• Last Synced: 2025-10-26T10:18:23.205Z (8 months ago)
• Topics: bootstrap5, bots, client-side, google-recaptcha-v2, javascript, tutorial
• Language: HTML
• Homepage:
• Size: 2.33 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![YouTube Views](https://img.shields.io/youtube/views/okaZ6OIqlzs?label=Views&style=social)](https://youtu.be/okaZ6OIqlzs)

![Forks](https://img.shields.io/github/forks/Tes3awy/recaptcha-vanilla-js?label=Total%20Forks&style=flat-square)

![Stars](https://img.shields.io/github/stars/Tes3awy/recaptcha-vanilla-js?label=Total%20Stars&style=flat-square)

![Issues](https://img.shields.io/github/issues/Tes3awy/recaptcha-vanilla-js?style=flat-square)

[![License](https://img.shields.io/github/license/Tes3awy/recaptcha-vanilla-js?color=purple&style=flat-square)](https://github.com/Tes3awy/recaptcha-vanilla-js/blob/main/LICENSE)

# Google reCAPTCHA V2 Checkbox Client-Side Validation with Vanilla JavaScript

> **You can also check this [repo](https://github.com/Tes3awy/recaptcha-vanilla-php). It includes a complete sample code of how server-side & client-side Google reCATPCHA V2 validations work.**

## Table of Contents

1. [Installation](#installation)

2. [Data Attributes](#data-attributes)

3. [YouTube Tutorials](#youtube-tutorials)

   1. [Client Side Validation](#client-side-validation)

   2. [Server Side Validation](#server-side-validation)

---

### Installation

```bash

$ 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](https://www.google.com/recaptcha/admin/create).

### Data Attributes

```js

data-sitekey="" (Required)

data-theme="" (Optional. Allowed values: "dark" or "light". Default: light)

data-size="" (Optional. Allowed values: "normal" or "compact". Default: normal)

data-callback="" (Optional)

data-expired-callback="" (Optional)

```

> I used [Bootstrap v5.1.1](https://getbootstrap.com/docs/5.1/getting-started/introduction/) as the front-end library. And the `bootstrap.min.css` was downloaded from [Bootswatch (Cosmos Theme)](https://bootswatch.com/cosmos/)

---

### YouTube Tutorials

#### Client Side Validation

You can also watch the client-side validation tutorial on ![YouTube](assets/images/YouTube.png 'YouTube Logo')

[![Client Side Validation](https://img.youtube.com/vi/okaZ6OIqlzs/0.jpg)](https://youtube.com/watch?v=okaZ6OIqlzs)

---

#### Server Side Validation

I made a tutorial about the server-side validation on ![YouTube](assets/images/YouTube.png 'YouTube Logo'). Grab your cup of coffee and enjoy watching!

[![Server Side Validation](https://img.youtube.com/vi/oJzGpDbeSuA/0.jpg)](https://youtube.com/watch?v=oJzGpDbeSuA)

---

For reference, please visit [Google reCAPTCHA Developers Guide](https://developers.google.com/recaptcha/docs/verify).