如何为输入元素禁用HTML5验证工具提示

问题描述：

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

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

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

如果你不关心字段验证，为什么你需要'required'属性？ –

@ScottMarcus，我用自定义工具提示进行角度验证。 – Arashsoft

答

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

把它们放在一个<form>容器内。
将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 website。

令人惊讶的是，在输入元素中添加'form'属性在angularJS框架中完美工作。正如我在问题中提到的那样，我正在使用'ng-form'指令以角度方式处理验证。向输入添加表单属性并不会中断角度验证，但会阻止HTML5验证。经过Chrome，Firefox，IE 10+测试。非常感谢。 – Arashsoft

“角度的方法”是使用'''

答

尽管接受的答案完成了这项工作，但另一种方式是通过简单地向输入元素添加一个'title'属性，验证信息将被title属性中的内容覆盖。

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

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

P.S在HTML5中，标题属性可以被任何HTML元素不像在HTML 4.01中。

如何为输入元素禁用HTML5验证工具提示

相关推荐