title: How to run reCaptcha ONLY if HTML5 validation has passed?
body: <p>Usually, HTML5 form validation runs <em>before</em> the <code>submit</code> event.</p>
  
  
  
  <p>With this</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;form id="myForm"&gt;
      &lt;input  type="text" name="foo" required /&gt;
  
      &lt;button type="submit"&gt; Submit &lt;/button&gt;
  
  &lt;/form&gt;
  
  &lt;script&gt;
      $("#myForm").on('submit',function(){
          console.log("I'm entering the submit event handler");
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>if the input field is empty, the submit event handler doesn't run.
  It will be triggered only if the HTML5 validation (the <code>required</code> attribute, in this case) has passed.</p>
  
  <p>I'd expect a captcha to run <strong><em>after</em></strong> the HTML5 validation too; why do I have to annoy the user compiling a captcha if later on I'd warn him there are missing fields ? <em>First</em> I should force the user to do everything in the right way, <em>then</em> ensure it's a human and not a bot, IMHO.</p>
  
  <p>Appearently, reCaptcha does something on the form it attaches on, removing the HTML5 validation feature. </p>
  
  <p>For example, using the latest <a href="https://developers.google.com/recaptcha/docs/invisible" rel="noreferrer">Invisible reCaptcha</a>:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;form id="myForm"&gt;
      &lt;input  type="text" name="foo" required /&gt;
  
      &lt;button type="submit"
             class="g-recaptcha" 
      data-sitekey="your_site_key" 
     data-callback='myCallback'&gt; Submit &lt;/button&gt;
  
  &lt;/form&gt;
  
  &lt;script&gt;
      function myCallback(token){
          $("#myForm").submit();
      }
  
      $("#myForm").on('submit',function(){
          console.log("I'm entering the submit event handler");
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The form will be submitted with the empty field, without notifying the user about its obligatoriness.</p>
  
  <p>Any clue on why it acts like this ? Is there a way I can instruct reCaptcha to let HTML5 form validation run before taking control ?</p>