title: How to prevent form submission while using HTML5 client-side form validation in Opera 11?
body: <p>How to prevent form submission while using HTML5 client-side form validation in Opera 11?</p>
  
  <p>Here is a sample test page:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;h2&gt;Test&lt;/h2&gt;
    &lt;form&gt;
      &lt;input type="text" name="test" id="test" required/&gt;
      &lt;input type="submit" value="Test" /&gt;
    &lt;/form&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Validation works in Opera 11, but when the button is clicked after entering a value, the browser submits the form.</p>
  
  <p>I want the browser to stay on the webpage always, which is good for client-side-only scripts, on the local hard drive, where there is no server, for example.</p>
  
  <p>When I add <code>return false;</code> or try to prevent the form from submitting, the validation no longer works.</p>
  
  <p>Opera 11.10 Build 2092</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Thanks to robertc's solution, I got it working. Here is the test page without jQuery.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> (function() {
     "use strict";
  
     window.addEventListener("load", function() {
       document.getElementById("testForm").addEventListener("submit", function(event) {
         event.target.checkValidity();
         event.preventDefault(); // Prevent form submission and contact with server
         event.stopPropagation();
       }, false);
     }, false);
   }());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;h2&gt;Test&lt;/h2&gt;
    &lt;form id="testForm"&gt;
      &lt;input type="text" name="test" id="test" required/&gt;
      &lt;input type="submit" value="Test" /&gt;
    &lt;/form&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>