How to Disable HTML5 Validation Tooltips for Input Elements Without Form

angularjs html html-validation
Arashsoft picture Arashsoft · Aug 10, 2017 · Viewed 15.6k times · Source

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

Vishnu Nair picture Vishnu Nair · Feb 9, 2018

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.

Related questions

AngularJS ngClass conditional

Is there any way to make an expression for something like ng-class to be a conditional? For example, I have tried the following: <span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span> The issue with this …

Read More
How do I delete an item or object from an array using ng-click?

I am trying to write a function that enables me to remove an item when the button is clicked but I think I am getting confused with the function - do I use $digest? HTML & app.js: <ul …

Read More
AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?

Using AngularJS if I set a simple input text box value to something like "bob" below. The value does not display if the ng-model attribute is added. <input type="text" id="rootFolder" ng-model="rootFolders" disabled="disabled" value="Bob" size="40"/&…

Read More