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

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 :

menu: Home
    name: my-nice-form
    action: /home
        - name: name
          id: name 
          label: Name
          classes: form-control form-control-lg
          placeholder: Votre nom
          autocomplete: on
          type: text
            required: true
        - name: email
          id: email
          classes: form-control form-control-lg
          label: Email
          placeholder: Votre adresse email
          type: text
            rule: email
            required: true
        - name: message
          label: Message
          classes: form-control form-control-lg
          size: long
          placeholder: Votre message
          type: textarea
            required: true           
        - name: g-recaptcha-response
          label: Captcha
          classes: form-control form-control-lg
          size: long
          type: captcha
          recaptcha_not_validated: 'Captcha non valide !'
            required: true

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

        - captcha:
            recatpcha_secret: ***
        - email:
            from: "{{ }}"
              - "{{ }}"
              - "{{ }}"
            subject: "[difo] Message de {{|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