如何在Opera 11中使用HTML5客户端表单验证时阻止表单提交？

Question

如何在Opera 11中使用HTML5客户端表单验证时阻止表单提交？

这是一个示例测试页面：

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

验证在Opera 11中有效，但在输入值后单击按钮时，浏览器会提交表单。

我希望浏览器始终保留在网页上，这对于仅有客户端的脚本而言，只适用于没有服务器的本地硬盘驱动器。

当我添加return false; 或者尝试阻止表单提交，验证不再有效。

Opera 11.10 Build 2092

编辑：

感谢robertc的解决方案，我得到了它的工作。 这是没有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

好的， 试试这个 。 表格基本上和以前一样：

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

然后将submit事件绑定到一个调用checkValidity()方法的函数：

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