Invisible reCAPTCHA is not submitting, just reloading itself infinitely

Question

I have the programatically binding method, once I click the submit button, the page never shows up signs of loading. I only see the badge reloading infinitely, my console shows the same resources being loaded repeatedly, once it reaches a point where apparently reCAPTCHA thinks I'm a robot spamming and makes me solve captchas, I solve them and the process is repeated once again, it never ends.

This is my code based on this answer HTML5 form validation before reCAPTCHA's:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
...
<form id='login' role='form' method='post'>
    <div class="form-group">
        <label for='form-user'>Username</label>
        <input type='text' class='form-control' id='form-user' name='form-user' placeholder='Username' required>
    </div>
    <div class="form-group">
        <label for='form-password'>Password</label>
        <input type='password' class='form-control' id='form-password' name='form-password' placeholder='Password' required>
    </div>
    <div class='g-recaptcha' data-sitekey='my-key' data-size='invisible' data-callback='onSubmit'></div>
    <input type='submit' value='Sign In' name='submit-btn' class='btn btn-default'>
</form>
<script>
    $('#login').submit(function (event) {
        event.preventDefault();
        grecaptcha.reset();
        grecaptcha.execute();
    });

    function onSubmit(response) {
        $('#login').submit();
    }
</script>

What could be happening and how to solve it? I'm working on localhost with verify the origin of reCAPTCHA solutions disabled.

Thanks in advance

score 0 · Answer 1 · answered Jul 25 '18 at 09:49

The captcha validation happens before onSubmit function is executed. That means that first there is captcha validation, then u submit the form, and you again reset the captcha and grecaptcha.execute() is again calling onSubmit function. Over and over again.

I don't know where you validation is, but for provided code you just want to get rid of those additional recaptcha execution, so $('#login').submit() is not necessary here.

Invisible reCAPTCHA is not submitting, just reloading itself infinitely

1 Answers1