Why is Chrome showing a "Please Fill Out this Field" tooltip on empty fields?

Html Problem Overview

I was contacted by my client saying that users complaint saying that some fields now show a tooltip with a message "Please Fill out This Field". I couldn't believe what I heard... but the client is right - using latest Chrome version some fields show a browser tooltip with this message even side by side with my validators!

What's the problem? What am I missing?

Thanks.

EDIT:

The HTML generated by my user control is as follows:

<input name="tbMontante" type="text" maxlength="8" size="10" tbMontante" class="Montantetextfield" 
	FieldName="Montante" 
	Required="True" 
	AllowDecimalValues="True" 
/>

EDIT:

My doctype is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Should my browser use HTML 5 to parse it?

Html Solutions

Solution 1 - Html

Are you using the HTML5 required attribute?

That will cause Chrome 10 to display a balloon prompting the user to fill out the field.

Solution 2 - Html

https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

You can disable the validation in the form.

Solution 3 - Html

Put novalidate="novalidate" on <form> tag.

<form novalidate="novalidate">
...
</form>

> In XHTML, attribute minimization is forbidden, and the novalidate > attribute must be defined as <form novalidate="novalidate">.

http://www.w3schools.com/tags/att_form_novalidate.asp

Solution 4 - Html

To stop that Html5 popup/balloon in Web-kit browser use following CSS

::-webkit-validation-bubble-message { display: none; }

Solution 5 - Html

As I mentioned in your other question:

The problem to do with that fact, that you invented your own non-standard attributes (which you shouldn't have done in the first place), and now new standardized attributes (or attributes in the process of being standardized) are colliding with them.

The proper solution is to completely remove your invented attributes and replace them with something sensible, for example classes (class="Montantetextfield fieldname-Montante required allow-decimal-values"), or store them in JavaScript:

var validationData = {
  "Montante": {fieldname: "Montante", required: true, allowDecimalValues: true}
}

If the proper solution isn't viable, you'll have to rename them. In that case you should use the prefix data-... because that is reserved by HTML5 for such purposes, and it's less likely to collide with something - but it still could, so you should seriously consider the first solution - even it is more work to change.

Solution 6 - Html

You need to add the attribute "formnovalidate" to the control that is triggering the browser validation, e.g.:

<input type="image" id="fblogin" formnovalidate src="/images/facebook_connect.png">

Solution 7 - Html

If you have an html form containing one or more fields with "required" attributes, Chrome (on last versions) will validate these fields before submitting the form and, if they are not filled, some tooltips will be shown to the users to help them getting the form submitted (I.e. "please fill out this field").

To avoid this browser built-in validation in forms you can use "novalidate" attribute on your form tag. This form won't be validated by browser:

<form id="form-id" novalidate>

    <input id="input-id" type="text" required>

    <input id="submit-button" type="submit">

</form>

Solution 8 - Html

In Chrome (v.56 is what I'm using but I AFAIK this applies generally) you can set title=" " (a single space) and the automatic title text will be overridden and nothing displayed. (If you try to make it just an empty string, though, it will treat it as if it isn't set and add that automatic tooltip text you've been getting).

I haven't tested this in other browsers, because I found it whilst making a Google Chrome Extension. I'm sure once I port things to other browsers, though, I'll see if it works in them (if even necessary), too.

Solution 9 - Html

Hey, we just did a global find-replace, changing Required=" to jRequired=". Then you just change it in the jquery code as well (jquery_helper.js -> Function ValidateControls). Now our validation continues as before and Chrome leaves us alone! :)

Content Type	Original Author	Original Content on Stackoverflow
Question	TiagoDias	View Question on Stackoverflow
Solution 1 - Html	Brandon	View Answer on Stackoverflow
Solution 2 - Html	TiagoDias	View Answer on Stackoverflow
Solution 3 - Html	Fred K	View Answer on Stackoverflow
Solution 4 - Html	Towhid	View Answer on Stackoverflow
Solution 5 - Html	RoToRa	View Answer on Stackoverflow
Solution 6 - Html	Adam	View Answer on Stackoverflow
Solution 7 - Html	chimos	View Answer on Stackoverflow
Solution 8 - Html	Rex Dexter	View Answer on Stackoverflow
Solution 9 - Html	tomlemes	View Answer on Stackoverflow