Add reCAPTCHA validation and prevent form submission when invalid

[MAILPOET-6182]

mailpoet/assets/js/src/public.tsx

@@ -435,6 +435,24 @@ jQuery(($) => {
     // setup form validation
     $('form.mailpoet_form').each((_, element) => {
       const form = $(element);
+
+      form
+        .parsley()
+        .on('form:validate', (formInstance: { validationResult: boolean }) => {
+          const reCaptcha = form.find('.mailpoet_recaptcha');
+          const isReCatpchaVisible =
+            reCaptcha.length &&
+            reCaptcha.first().attr('data-size') !== 'invisible';
+          if (isReCatpchaVisible) {
+            if (window.grecaptcha.getResponse() === '') {
+              // eslint-disable-next-line no-param-reassign
+              formInstance.validationResult = false;
+              form.find('.mailpoet_error_recaptcha').addClass('filled');
+            } else {
+              form.find('.mailpoet_error_recaptcha').removeClass('filled');
+            }
+          }
+        });
       // Detect form is placed in tight container
       form.parsley().on('form:validated', () => {
         // clear messages

mailpoet/lib/Form/Renderer.php

@@ -114,6 +114,9 @@ class Renderer {
       </noscript>
       <input class="mailpoet_recaptcha_field" type="hidden" name="recaptchaWidgetId">
     </div>';
+    if ($size !== 'invisible') {
+      $html .= '<div class="parsley-errors-list parsley-required mailpoet_error_recaptcha">' . __('This field is required.', 'mailpoet') . '</div>';
+    }
 
     return $html;
   }