asked on

Google Invisible Recaptcha - Form Validation

I have a form that I'm using invisible Recaptcha on - and I want to validate a field prior to submission. This has turned out to be a far bigger pain than anticipated, mostly due to when the ReCaptcha instance would be rendered. But - using their docs - I've set up:

<html>
<head>
<script>
  function onSubmit(token) {
    alert("Submitting");
    document.getElementById('myform').submit();
  }

  function validate(event) {
    event.preventDefault();
    if (!document.getElementById('field').value) {
      alert("You must add text to the required field");
    } else {
      grecaptcha.execute();
    }
  }

  function onload() {
    var element = document.getElementById('submit');
    element.onclick = validate;
  }
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
   <form id="myform" action="hello.php" method="POST">
     Name: (required) <input id="field" name="field">
     <div id='recaptcha' class="g-recaptcha"
          data-sitekey="your_site_key"
          data-callback="onSubmit"
          data-size="invisible"></div>
     <button id='submit'>submit</button>
   </form>
<script>onload();</script>
</body>
</html>

Open in new window

Now, it will verify that the field has been filled in, it will alert me, but it will not "submit" the action? It stops at that point.

What am I missing?

ASKER CERTIFIED SOLUTION

Jim Riddles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jim Riddles

Did my suggestion help you in solving your issue? If not, please respond with more information, or a link to your site, and I can assist in further troubleshooting.