如何为没有表单的输入元素禁用 HTML5 验证工具提示
How to Disable HTML5 Validation Tooltips for Input Elements Without Form
如果我在 <form>
元素中有一个 input
,我可以简单地将 novalidate
属性添加到表单以禁用 HTML5 验证工具提示。但是,我的输入不是表单元素(我使用 angularJS 并且我使用 ng-form
指令)。
我可以监听 invalid 事件并阻止提交验证,但我无法阻止验证工具提示。
这是一个简单的 JsFiddle 来说明问题。
在 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
元素的更多信息。
虽然已接受的答案可以完成这项工作,但另一种方法是通过简单地向输入元素添加 'title' 属性,验证消息将被 title 属性中的内容覆盖.
您可以在标题属性中添加一些有意义的文字,
<input type="email" title="Your Email">
P.S 在 HTML5 中,title 属性可以用在任何 HTML 元素上,这与 HTML 4.01 不同。
你也可以使用这个脚本
<script>
document.getElementById( "inputId" ).addEventListener( "invalid",
function( event ) {
event.preventDefault();
});
</script>
如果我在 <form>
元素中有一个 input
,我可以简单地将 novalidate
属性添加到表单以禁用 HTML5 验证工具提示。但是,我的输入不是表单元素(我使用 angularJS 并且我使用 ng-form
指令)。
我可以监听 invalid 事件并阻止提交验证,但我无法阻止验证工具提示。
这是一个简单的 JsFiddle 来说明问题。
在 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
元素的更多信息。
虽然已接受的答案可以完成这项工作,但另一种方法是通过简单地向输入元素添加 'title' 属性,验证消息将被 title 属性中的内容覆盖.
您可以在标题属性中添加一些有意义的文字,
<input type="email" title="Your Email">
P.S 在 HTML5 中,title 属性可以用在任何 HTML 元素上,这与 HTML 4.01 不同。
你也可以使用这个脚本
<script>
document.getElementById( "inputId" ).addEventListener( "invalid",
function( event ) {
event.preventDefault();
});
</script>