How to disable HTML validation tooltips for input elements without a <form>

Question

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

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

Here is a simple JSFiddle to show the issue.

Answer 1

In HTML you have two options for input elements:

1. Put them inside a <form> container.
2. Add the form attribute to the input, the value should be the id of the form that the input is related to.

Using option #2 you can just add an empty form with the novalidate somewhere in your DOM and attach the input to that form:

<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 />

More information regarding the input element in MDN website.