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

Question

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

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

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

原文由 Arashsoft 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 html5 你有两个输入元素选项：

1. 将它们放入 <form> 容器中。
2. 在输入中添加 form 属性，值应该是输入相关的表单的 id 。

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

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

有关 input 元素的更多信息，请参见 MDN 网站。

原文由 Dekel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

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

原文由 Vishnu Nair 发布，翻译遵循 CC BY-SA 3.0 许可协议