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

Question

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

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

这是一个简单的 JsFiddle 来说明问题。

Answer 1

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

将它们放入 <form> 容器中。
给input添加form属性，值应该是input关联的表单的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 />

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

Answer 2

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

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

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

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

Answer 3

你也可以使用这个脚本

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

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

How to Disable HTML5 Validation Tooltips for Input Elements Without Form

html

html-validation

angularjs