如何在Opera 11中使用HTML5客户端表单验证时阻止表单提交？ [英] How to prevent form submission while using HTML5 client-side form validation in Opera 11?

问题描述

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

下面是一个样本测试页面：

 < section> < H2>试验< / H2> <形式> < input type =textname =testid =testrequired /> < input type =submitvalue =Test/> < / form>< / section>  

Opera 11，但是当输入一个值后点击按钮时，浏览器会提交表单。

我希望浏览器始终保持在网页上，这对于例如在没有服务器的本地硬盘驱动器上。

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

Opera 11.10 Build 2092

编辑：

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

$ b

<节> < H2>试验< / H2> < form id =testForm> < input type =textname =testid =testrequired /> < input type =submitvalue =Test/> < / form>< / section>

解决方案

好的，试试这个。表格基本上和以前一样：

 < section> 
< h2>测试< / h2> 
< form id =form> 
< input type =textname =testid =testrequired /> 
< input type =submitvalue =Test/> 
< / form> 
< / section> 
  

然后将 submit 事件绑定到函数它调用 checkValidity（）方法： $ b $ {
ev.target.checkValidity（）;
返回false;
}
$（＃form）。bind（submit，manualValidate）;


How to prevent form submission while using HTML5 client-side form validation in Opera 11?

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.

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; or try to prevent the form from submitting, the validation no longer works.

Opera 11.10 Build 2092

EDIT:

Thanks to robertc's solution, I got it working. Here is the test page without 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:

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

这篇关于如何在Opera 11中使用HTML5客户端表单验证时阻止表单提交？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！