70

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?

Marco Lackovic
  • 6,077
  • 7
  • 55
  • 56
TiagoDias
  • 1,785
  • 1
  • 16
  • 21

9 Answers9

58

Are you using the HTML5 required attribute?

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

Splaktar
  • 5,506
  • 5
  • 43
  • 74
Brandon
  • 68,708
  • 30
  • 194
  • 223
  • No, i'm not. simple html only – TiagoDias Mar 22 '11 at 15:06
  • Brandon, is in the initial post. – TiagoDias Apr 04 '11 at 15:04
  • 13
    You are using the HTML5 required attribute. There is no required attribute in HTML4 - http://www.w3.org/TR/html4/index/attributes.html. Remove the required attribute and you will be fine. Validate your code at http://validator.w3.org – sunn0 Apr 12 '11 at 16:08
  • 4
    @sunn0: He isn't really "using the HTML5 `required` attribute". He invented his own attribute and that is now colliding then HTML5 attribute of the same name. – RoToRa Apr 13 '11 at 11:52
  • 5
    if you don't want it to get picked up as the html5 required attribute, use data-required="true" instead of required="true" – Alex K Sep 08 '13 at 23:52
46

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

You can disable the validation in the form.

ÐerÆndi
  • 139
  • 10
TiagoDias
  • 1,785
  • 1
  • 16
  • 21
  • 20
    I ran into this issue in a AngularJS app. It was caused by not including the novalidate attribute in the
    tag.
     – Mark Apr 25 '14 at 19:08
  • If you have an angular app inside of SharePoint make sure to add it in a pageviewer webpart. When you try to edit the page the novalidate isn't triggered. – Chad Jun 18 '18 at 17:39
37

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

Fred K
  • 13,249
  • 14
  • 78
  • 103
  • If you add this then the attribute won't actually work - it just submits without required fields. – B T Jan 15 '21 at 22:40
  • @BT this is expected behaviour. No validation means no validation. – tlt Dec 30 '21 at 03:48
  • @tlt Ok, it may be expected based on some spec somewhere, but it doesn't solve the OPs problem (or mine). Previously, you could use validators and have your own error messages styled appropriately to your website. Now it seems you can't use html validators if you don't want ugly standard UI elements shoved into your application by the browser. – B T Dec 31 '21 at 20:07
12

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

::-webkit-validation-bubble-message { display: none; }
Lucky
  • 16,787
  • 19
  • 117
  • 151
Towhid
  • 1,920
  • 3
  • 36
  • 57
  • 3
    this no longer works. http://stackoverflow.com/questions/5713405/how-do-you-style-the-html5-form-validation-messages – Damian Green Nov 20 '15 at 15:36
9

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.

Community
  • 1
  • 1
RoToRa
  • 37,635
  • 12
  • 69
  • 105
3

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">
Adam
  • 6,041
  • 36
  • 120
  • 208
3

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>
chimos
  • 664
  • 2
  • 14
  • 34
3

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.

Rex Dexter
  • 51
  • 4
1

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! :)

tomlemes
  • 11
  • 1