How to prevent form submission while using HTML5 client-side form validation in Opera 11?

Question

How to prevent form submission while using HTML5 client-side form validation in Opera 11?

Here is a sample test page:

<section>
  <h2>Test</h2>
  <form>
    <input type="text" name="test" id="test" required/>
    <input type="submit" value="Test" />
  </form>
</section>

Validation works in Opera 11, but when the button is clicked after entering a value, the browser submits the form.

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.

When I add return false; or try to prevent the form from submitting, the validation no longer works.

Opera 11.10 Build 2092

EDIT:

Thanks to robertc's solution, I got it working. Here is the test page without jQuery.

 (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);
 }());

<section>
  <h2>Test</h2>
  <form id="testForm">
    <input type="text" name="test" id="test" required/>
    <input type="submit" value="Test" />
  </form>
</section>

Chromatolysis

I think you should not write required but instead required="required". Don't know whether this is the cause, though. – Metallist

I think that required="required" is for XHTML and that HTML5 accepts either one (validates as well). I just tried with the "required" string, but there is no difference in the result. – Chromatolysis

Answer 1

OK, try this. The form is basically as before:

<section>
    <h2>Test</h2>
    <form id="form">
        <input type="text" name="test" id="test" required/>
        <input type="submit" value="Test"/>
    </form>
</section>

Then bind the submit event to a function which calls the checkValidity() method:

function manualValidate(ev) {
    ev.target.checkValidity();
    return false;
}
$("#form").bind("submit", manualValidate);

Chapnick

Even with or without action, validation works. The problem is that I do not want the browser to submit the form. I only want validation to work. – Chromatolysis

@Chromatolysis Sorry, I misunderstood your problem - I'll update my answer in a bit – Chapnick

@Chromatolysis OK, answered the right question this time, I think it was Firefox that used to have a problem with not working on forms which had no target, but it looks like they fixed it before the final 4.0 release. – Chapnick

This works. Is this the only solution, one that requires jQuery? Possible without jQuery? Do you think that this problem is an Opera bug, or is this intended behavior? In Chrome 11.0.696.65 and Firefox 4.0.1, there is no need for this workaround; the validation message always appears. – Chromatolysis

@Chromatolysis It doesn't require jQuery, I just used jQuery to bind the event to the form because that's quicker than writing cross-browser event binding code. I'm not sure if it's a bug, I'll have to read up in the spec. – Chapnick