Webform issue with captcha

Question

I have created about 11 webforms in my website. Now I want to add recaptcha challenge in all of them.

I have installed the captcha module and recaptcha module. recaptcha is coming in all these forms. The problem is form gets submitted even if challenge is not taken. Below is yml file of a sample webform I have created

test_field:
  '#type': textfield
  '#title': 'Test field'
  '#required': true
captcha:
  '#type': captcha
  '#captcha_type': recaptcha/reCAPTCHA

Answer 1

I don't think reCAPTCHA module provides front-end validation. Have you tried performing front-end validation using reCAPTCHA API? You could try something like this:

 $('form').submit(function () {
   if (!grecaptcha.getResponse()) {
     event.preventDefault();
     $('<span class="red recaptcha">reCAPTCHA is invalid</span>').insertAfter('.g-recaptcha');}
  }); 

Answer 2

If you have already created a webform then you can follow thi step

1. Open this url /admin/structure/webform (Structure -> Webform)

2. Click on "Build" in OPERATIONS column

3. Click on "+Add element" button, there will be seen a list form element, you can select captcha from available element