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

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

这是一个示例测试页面

  1. <section>
  2. <h2>Test</h2>
  3. <form>
  4. <input type="text" name="test" id="test" required/>
  5. <input type="submit" value="Test" />
  6. </form>
  7. </section>

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

我希望浏览器始终保持在网页上,这对于仅有客户端的脚本而言是好的,例如,本地硬盘驱动器上没有服务器.

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

Opera 11.10 Build 2092

编辑:

感谢robertc的解决方案,我得到了它的工作.这是没有jQuery的测试页面.

  1. (function() {
  2. "use strict";
  3.  
  4. window.addEventListener("load",function() {
  5. document.getElementById("testForm").addEventListener("submit",function(event) {
  6. event.target.checkValidity();
  7. event.preventDefault(); // Prevent form submission and contact with server
  8. event.stopPropagation();
  9. },false);
  10. },false);
  11. }());
  1. <section>
  2. <h2>Test</h2>
  3. <form id="testForm">
  4. <input type="text" name="test" id="test" required/>
  5. <input type="submit" value="Test" />
  6. </form>
  7. </section>

解决方法

好的,try this.表格基本上和以前一样:
  1. <section>
  2. <h2>Test</h2>
  3. <form id="form">
  4. <input type="text" name="test" id="test" required/>
  5. <input type="submit" value="Test"/>
  6. </form>
  7. </section>

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

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

猜你在找的HTML相关文章