title: Validating submit of form with Google reCAPTCHA
body: <p>I've had a look at this question </p>
  
  <p><a href="https://stackoverflow.com/questions/27450562/how-to-validate-google-recaptcha-on-form-submit">How to Validate Google reCaptcha on Form Submit</a></p>
  
  <p>And tried to implement the answer of that question into my code to validate my form so that it won't submit if the captcha hasn't been completed.</p>
  
  <p>However nothing happens - it just submits the form.</p>
  
  <p>this is my code:</p>
  
  <pre><code> &lt;head&gt;
  
          &lt;script type="text/javascript"&gt;
    var onloadCallback = function() {
      grecaptcha.render('html_element', {
        'sitekey' : 'my_site_key'
      });
    };
  &lt;/script&gt;
  
   &lt;/head&gt;
  
            &lt;div id="html_element"&gt;&lt;/div&gt;
        &lt;br&gt;
  
        &lt;input type="submit" value="Submit" onclick="myFunction"&gt;
  
  &lt;script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&amp;render=explicit" async defer&gt;
  function myFunction() {    
  if(grecaptcha.getResponse() == "")
      alert("You can't proceed!");
  else
      alert("Thank you");}
   &lt;/script&gt;
  </code></pre>
  
  <p>Can anyone help?</p>
  
  <p><strong>EDIT</strong> </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
          &lt;script type="text/javascript"&gt;
  
  var onloadCallback = function() {
      grecaptcha.render('html_element', {
      'sitekey' : 'site-key'
    });
  };
  onloadCallback();
  
  $('form').on('submit', function(e) {
    if(grecaptcha.getResponse() == "") {
      e.preventDefault();
      alert("You can't proceed!");
    } else {
      alert("Thank you");
    }
  });
             &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;form action="?" method="POST"&gt;
        &lt;div id="html_element"&gt;&lt;/div&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Submit"&gt;
      &lt;/form&gt;
  
  
  &lt;script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&amp;render=explicit" async defer&gt;
  
   &lt;/script&gt;
      &lt;/body&gt;
  </code></pre>