2

I use reCaptcha+validation jQuery plugin:

<script>
  $('#contact_us-form').validate({
    submitHandler: function(form) {
      grecaptcha.execute(); //How to run this syncly?
      $(form).ajaxSubmit({ ... }); // This request without token
    }
  });
</script>
<form>
    ...
    <div class='g-recaptcha' ... />
</form>

This code almost works. Almost because execute is run async and response is come after ajaxSubmit submits form data.

The work around is to assign callback property for g-recaptcha and move ajaxSubmit into that callback:

var my_callback = function() {
  $(form).ajaxSubmit({ ... });
}

<div class='g-recaptcha' data-callback='my_callback'/>

But this looks hairly. Furthermore the form variable is not available from my_callback thus I can not reuse this call back between similar forms.

Is there a way to execute synchronously?

Eugen Konkov
  • 22,193
  • 17
  • 108
  • 158
  • `submitHandler` only fires when the form is valid... however, if you have not verified reCaptcha yet, then the form is not valid. My point? The `submitHandler` might not be the best place for checking reCaptcha. – Sparky Jun 21 '18 at 17:20
  • Another way is to do the reCaptcha check on your server-side instead of another ajax call to Google from the client. https://stackoverflow.com/a/15414279/594235 – Sparky Jun 21 '18 at 17:24
  • @Sparky: Yes. It fires before data is submitted to the server. There is no reason to bother google if form data is not validated. At `submitHandler` form is valid and before submitting it to our server we do last check: captcha. – Eugen Konkov Jun 21 '18 at 17:25
  • @Sparky: that answer is outdated. We should do ajax call to Google to prevent bots make requests to our servers – Eugen Konkov Jun 21 '18 at 17:27
  • Since asynchronous ajax calls are obviously a problem, then good luck to you. – Sparky Jun 21 '18 at 17:29
  • Perhaps just stick with your "hairly" workaround, which should work as long as you fix the form selector. – Sparky Jun 21 '18 at 17:41

0 Answers0