¿Cómo evitar el envío de formularios al usar la validación de formularios del lado del cliente HTML5 en Opera 11?

Question

Cómo evitar el envío de formularios al usar la validación de formulario del lado del cliente HTML5 en Opera 11?

Aquí es una página de prueba de la muestra:

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

Validación funciona en Opera 11, pero cuando se hace clic en el botón después de introducir un valor, el navegador envía el formulario.

Quiero que el navegador permanezca siempre en la página web, lo que es bueno para las secuencias de comandos del lado del cliente, en el disco duro local, donde no hay ningún servidor, por ejemplo.

Cuando agrego return false; o trato de evitar que el formulario se envíe, la validación ya no funciona.

Opera 11.10 Build 2092

EDIT:

Gracias a la solución de robertc, lo tengo trabajo. Aquí está la página de prueba sin 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>

Answer 1

OK, try this. La forma es básicamente igual que antes:

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

A continuación, se unen el evento submit a una función que llama al método checkValidity():

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