diff --git a/mailpoet/assets/js/src/public.tsx b/mailpoet/assets/js/src/public.tsx index 6fd4568c7f..f56f3ba860 100644 --- a/mailpoet/assets/js/src/public.tsx +++ b/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 diff --git a/mailpoet/lib/Form/Renderer.php b/mailpoet/lib/Form/Renderer.php index 5c9c162750..b6bc1eb5f6 100644 --- a/mailpoet/lib/Form/Renderer.php +++ b/mailpoet/lib/Form/Renderer.php @@ -114,6 +114,9 @@ class Renderer { '; + if ($size !== 'invisible') { + $html .= '
' . __('This field is required.', 'mailpoet') . '
'; + } return $html; }