如何在没有 <form>

Question

我知道，如果我在

input

元素中有一个

<form>

，我可以简单地将

novalidate

属性添加到表单中以禁用 HTML 验证工具提示。但是，我的输入不在表单元素中（我使用 AngularJS 并且使用

ng-form

指令）。

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

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

Answer 1

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

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

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

Answer 2

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

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 网站。

Answer 3

您也可以使用此脚本

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

Answer 4

将

novalidate

添加到

form

标签应该就足够了