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

前端之家收集整理的这篇文章主要介绍了表单 – 如何在Opera 11中使用HTML5客户端表单验证时阻止表单提交?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在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>

解决方法

好的,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事件绑定到一个调用checkValidity()方法函数

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

猜你在找的HTML相关文章