forms - 在 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

好的，try this .形式基本和以前一样:

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

然后将 submit 事件绑定(bind)到调用 checkValidity() 方法的函数:

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