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

Question

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    lt input name  tbMontante  type  text  maxlength  8  size  10  tbMontante  class  Montantetextfield       FieldName  Montante       Required  True       AllowDecimalValues  True     gt    EDIT   My doctype is as follows    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01 Transitional  EN   http   www w3 org TR html4 loose dtd  gt    Should my browser use HTML 5 to parse it

User · Answer

Are you using the HTML5 required attribute   That will cause Chrome 10 to display a balloon prompting the user to fill out the field

User · Answer

You need to add the attribute  formnovalidate  to the control that is triggering the browser validation  e g     lt input type  image  id  fblogin  formnovalidate src   images facebook connect png  gt

User · Answer

Put novalidate  novalidate  on  lt form gt  tag    lt form novalidate  novalidate  gt       lt  form gt       In XHTML  attribute minimization is forbidden  and the novalidate   attribute must be defined as  lt form novalidate  novalidate  gt     http   www w3schools com tags att form novalidate asp

User · Answer

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    lt form id  form-id  novalidate gt        lt input id  input-id  type  text  required gt        lt input id  submit-button  type  submit  gt    lt  form gt

User · Answer

https   www w3 org TR html5 sec-forms html element-attrdef-form-novalidate  You can disable the validation in the form

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

To stop that Html5 popup balloon in Web-kit browser use following CSS     -webkit-validation-bubble-message   display  none

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

Examples related to html

Examples related to google-chrome

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

Examples related to html

Examples related to google-chrome

Examples related to popup