如何在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);