如何爲輸入元素禁用HTML5驗證工具提示

Question

如果我在<form>元素中有input，我可以簡單地將novalidate屬性添加到表單以禁用HTML5驗證工具提示。然而，我的輸入不是一個表單元素（我使用angularJS，我使用ng-form指令）。

我可以收聽invalid事件並阻止提交驗證，但我無法阻止驗證工具提示。

下面是一個簡單的JsFiddle來顯示問題。

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 website。

Answer 2

儘管接受的答案完成了這項工作，但另一種方式是通過簡單地向輸入元素添加一個'title'屬性，驗證信息將被title屬性中的內容覆蓋。

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

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

P.S在HTML5中，標題屬性可以被任何HTML元素不像在HTML 4.01中。