How to Disable HTML5 Validation Tooltips for Input Elements Without Form

user_3328979 0
Viewed 20463

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.

html-validation angularjs html
3 Answers

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.

user_54484920

You can also use this script

<script>
    document.getElementById( "inputId" ).addEventListener( "invalid",
        function( event ) {
            event.preventDefault();
        });
</script>
user_90695430
Related