如何为没有表单的输入元素禁用HTML5验证工具提示

Question

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

我可以听无效事件并阻止提交验证，但是我不能阻止验证工具提示。

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

Answer 1

尽管“已接受”的答案可以完成工作，但是另一种实现方法是，只需在输入元素中添加“ title”属性，验证消息就会被title属性中的内容覆盖。

您可以在title属性中添加一些有意义的文本，

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

PS在HTML5中，与HTML 4.01不同，可以在任何HTML元素上使用title属性。

Answer 2

在html5你输入元素两种选择：

1. 把它们放在一个<form>容器里。
2. 将form属性添加到输入中，值应该是id输入所关联的表单的。

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

<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 />

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