ReCaptcha not validated client-side or how to deal with form errors

Archive
1

Hi !

I copied the documentation to add a captcha field to my form. The validation of the captcha works great server side (the form isn’t validated if I don’t check the box), but the validation only happens server-side. This means that the form is submitted even if I didn’t check “I’m not a robot”, and the page is reloaded.

This is a big issue since when the page reloads, the user has to scroll down to the form to see the error message.

I’d love some help about how to deal with this, eg. how to make ReCaptcha validate client-side, or better display form errors (scroll down to the error, display the error message in red).

I use landio theme, but from what I understand, it seems to extend the base form templates.

And here’s my form code :

title: 
menu: Home
form:
    name: my-nice-form
    action: /home
    fields:
        - name: name
          id: name 
          label: Name
          classes: form-control form-control-lg
          placeholder: Votre nom
          autocomplete: on
          type: text
          validate:
            required: true
        - name: email
          id: email
          classes: form-control form-control-lg
          label: Email
          placeholder: Votre adresse email
          type: text
          validate:
            rule: email
            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
          classes: form-control form-control-lg
          size: long
          type: captcha
          recaptcha_not_validated: 'Captcha non valide !'
          validate:
            required: true
          

    buttons:
        - type: submit
          value: Envoyer
          class: btn btn-primary btn-block

    process:
        - captcha:
            recatpcha_secret: ***
        - email:
            from: "{{ config.plugins.email.from }}"
            to:
              - "{{ config.plugins.email.to }}"
              - "{{ form.value.email }}"
            subject: "[difo] Message de {{ form.value.name|e }} à difo.agency "
            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
---