[英]How to prevent form submission while using HTML5 client-side form validation in Opera 11?
How to prevent form submission while using HTML5 client-side form validation in Opera 11? 如何在Opera 11中使用HTML5客户端表单验证时阻止表单提交?
Here is a sample test page: 这是一个示例测试页面:
<section> <h2>Test</h2> <form> <input type="text" name="test" id="test" required/> <input type="submit" value="Test" /> </form> </section>
Validation works in Opera 11, but when the button is clicked after entering a value, the browser submits the form. 验证在Opera 11中有效,但在输入值后单击按钮时,浏览器会提交表单。
I want the browser to stay on the webpage always, which is good for client-side-only scripts, on the local hard drive, where there is no server, for example. 我希望浏览器始终保留在网页上,这对于仅有客户端的脚本而言,只适用于没有服务器的本地硬盘驱动器。
When I add return false;
当我添加
return false;
or try to prevent the form from submitting, the validation no longer works. 或者尝试阻止表单提交,验证不再有效。
Opera 11.10 Build 2092 Opera 11.10 Build 2092
EDIT: 编辑:
Thanks to robertc's solution, I got it working. 感谢robertc的解决方案,我得到了它的工作。 Here is the test page without jQuery.
这是没有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>
OK, try this . 好的, 试试这个 。 The form is basically as before:
表格基本上和以前一样:
<section>
<h2>Test</h2>
<form id="form">
<input type="text" name="test" id="test" required/>
<input type="submit" value="Test"/>
</form>
</section>
Then bind the submit
event to a function which calls the checkValidity()
method: 然后将
submit
事件绑定到一个调用checkValidity()
方法的函数:
function manualValidate(ev) {
ev.target.checkValidity();
return false;
}
$("#form").bind("submit", manualValidate);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.