Recaptcha not validated client-side

[olivierdalang]

Hi !

I added a recaptcha to my form and set it to required.
But I'm still able to submit the form even if I didn't fill the recaptcha.

Here's my form.md

---
form:
    name: my-nice-form
    action: /test
    fields:
        - name: name
          id: name
          label: Name
          classes: form-control form-control-lg
          placeholder: Votre nom
          type: text
          validate:
            required: true
        - name: email
          id: email
          classes: form-control form-control-lg
          label: Email
          placeholder: Votre adresse email
          type: email
          validate:
            required: true
        - name: message
          label: Message
          classes: form-control form-control-lg
          size: long
          placeholder: Votre message
          type: textarea
          validate:
            required: true
        - name: g-recaptcha-response
          label: Captcha
          type: captcha
          classes: form-control form-control-lg
          recaptcha_not_validated: 'Captcha not valid!'
          validate:
            required: true
    buttons:
        - type: submit
          value: Envoyer
          class: btn btn-primary btn-block
    process:
        - captcha:
            recatpcha_secret: *{here goes my secret}*
        - email:
            from: "{{ config.plugins.email.from }}"
            to:
              - "{{ config.plugins.email.to }}"
              - "{{ form.value.email }}"
            subject: "[difo] Message de {{ form.value.name|e }} "
            body: "{% include 'forms/data.html.twig' %}"
        - save:
            fileprefix: feedback-
            dateformat: Ymd-His-u
            extension: txt
            body: "{% include 'forms/data.txt.twig' %}"
        - message: Merci pour votre message !
        - display: thankyou
---

[rhukster]

I think your config has a typo, should be:

...
process:
        - captcha:
            recaptcha_secret: *{here goes my secret}*
...

[olivierdalang]

Oops nice catch !

But that's not the error I was talking about, as this only affects server-side validation (which works fine, provided I correct the typo).

I think users shouldn't be able to submit the form if the captcha isn't set. Looking at the source, it seems

...
 - name: g-recaptcha-response
          validate:
            required: true
...

isn't used anywhere in the captcha.html.twigtemplate.

[rhukster]

Captcha is handled on form submission, there is no client-side ajax ability. This is because its a Google-provided verification service that only works with submitted forms.

[olivierdalang]

Yes I know it's not possible to validate if the captcha is entered correctly client side, but still it's possible to know whether it was filled at all.

In the end, the captcha field renders as a normal input element (it's just hidden).

I'm just testing, and this extremely dirty workaround seems to do the trick :

<script>
$(function() {
    $("#my-nice-form button[type=submit]").click(function(e) {
        $('#g-recaptcha-response').attr('required','required');
        // for client-side validation to work, the field must be focusable
        // (this should of course be in the css)
        $('#g-recaptcha-response').css('display','block');
        $('#g-recaptcha-response').css('position','absolute');
        $('#g-recaptcha-response').css('top','0');
        $('#g-recaptcha-response').css('z-index','-1000');
        $('#g-recaptcha-response').parent().css('position','relative');
     });
});
</script>

I'think the required attribute

[olivierdalang]

By the way, it seems to be possible to validate the captch client side using captchaValidatedCallback

[olivierdalang]

Please reopen this issue as the rationale for closing is not valid. Again, we're not talking about validating the captcha client-side, but validating whether it's populated client-side (e.g. enforce the "required" parameter).

[flaviocopes]

Looking into

[flaviocopes]

This should do it. @olivierdalang Can you test?

[rhukster]

Closing because due to issue age. Please re-open if you continue to have issues