Question

如果我在input元素中有<form>，我只需将novalidate属性添加到表单即可禁用HTML5验证工具提示。但是，我的输入不是表单元素（我使用的是angularJS，而是使用ng-form指令）。

我可以收听invalid事件并阻止提交验证，但我无法阻止验证工具提示。

这是一个简单的JsFiddle来显示问题。

Answer 1

虽然接受的答案可以完成这项工作，但是另外一种方法是通过简单地向输入元素添加'title'属性，验证消息将被title属性中的内容覆盖。

您可以在title属性

中添加一些有意义的文本

<input type="email" title="Your Email">

P.S在HTML5中，title属性可用于任何HTML元素，与HTML 4.01不同。

Answer 2

在html5中，您有两个输入元素选项：

将它们放在<form>容器内。
将form属性添加到输入中，该值应为与输入相关的表单的id。

使用选项＃2，您只需在DOM中的某处添加一个空表单novalidate，并将输入附加到该表单：

＆＃13;

<form novalidate>
  <p>Input in form with novalidate. This one is fine.</p>
  <input type="email" required>
</form>

<p>Input without form. How to disable validation tooltips? (hover over input to see validation tooltip)</p>
<input type="email" required form="novalidatedform">

<form id="novalidatedform" novalidate />

＆＃13;

有关MDN website中input元素的更多信息。

Answer 3

您也可以使用此脚本

<script>
    document.getElementById( "inputId" ).addEventListener( "invalid",
        function( event ) {
            event.preventDefault();
        });
</script>

如何禁用没有表单

3 个答案: