Execute the V3 Challenge on form submit, not on page load

Author: damienalexandre

src/Resources/views/Form/v3/ewz_recaptcha_widget.html.twig

@@ -7,17 +7,24 @@
       <link rel="stylesheet" href="{{ asset('/bundles/ewzrecaptcha/css/recaptcha.css') }}">
     {% endif %}
 
+    {{ form_label(form) }}
+    {{ form_widget(form) }}
+
     <script{% if form.vars.script_nonce_csp is defined and form.vars.script_nonce_csp is not same as('') %} nonce="{{ form.vars.script_nonce_csp }}"{% endif %}>
-      grecaptcha.ready(function () {
-        grecaptcha.execute('{{ form.vars.public_key }}', { action: '{{ form.vars.action_name|default(constant('EWZ\\Bundle\\RecaptchaBundle\\Form\\Type\\EWZRecaptchaV3Type::DEFAULT_ACTION_NAME')) }}' }).then(function (token) {
-          var recaptchaResponse = document.getElementById('{{ id }}');
-          recaptchaResponse.value = token;
+      var grecaptchaInput = document.getElementById('{{ id }}');
+      grecaptchaInput.value = ''; // Always reset the value to get a brand new challenge
+      var grecaptchaForm = grecaptchaInput.form;
+      grecaptchaForm.addEventListener('submit', function (e) {
+        e.preventDefault();
+
+        grecaptcha.ready(function () {
+          grecaptcha.execute('{{ form.vars.public_key }}', { action: '{{ form.vars.action_name|default(constant('EWZ\\Bundle\\RecaptchaBundle\\Form\\Type\\EWZRecaptchaV3Type::DEFAULT_ACTION_NAME')) }}' }).then(function (token) {
+            grecaptchaInput.value = token;
+            grecaptchaForm.submit();
+          });
         });
-      });
+      }, false);
     </script>
-
-    {{ form_label(form) }}
-    {{ form_widget(form) }}
   {% endif %}
 {% endapply %}
 {% endblock %}