How to Disable HTML5 Validation Tooltips for Input Elements Without Form

Question

If I have an input within a <form> element, I can simply add the novalidate attribute to the form to disable the HTML5 validation tooltips. However, my input is not a in a form element (I am using angularJS and I use ng-form directive).

I can listen to invalid event and prevent submit validation but I cannot prevent validation tooltips.

Here is a simple JsFiddle to shows the issue.

Answer 1

Although the Accepted answer does the job, one another way how this could be done is by simply adding a 'title' attribute to the input element, and the validation message will be overwritten with the content in title attribute.

You can add some meaningful text in the title attribute,

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

P.S In HTML5, the title attribute can be used on any HTML element unlike in HTML 4.01.