Html 为什么 Chrome 在空白字段上显示“请填写此字段”工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5392882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is Chrome showing a "Please Fill Out this Field" tooltip on empty fields?
提问by TiagoDias
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!
我的客户联系我说用户抱怨说某些字段现在显示带有消息“请填写此字段”的工具提示。我简直不敢相信我听到的……但客户是对的 - 使用最新的 Chrome 版本，某些字段甚至会与我的验证器并排显示带有此消息的浏览器工具提示！
What's the problem? What am I missing?
有什么问题？我错过了什么？
Thanks.
谢谢。
EDIT:
编辑：
The HTML generated by my user control is as follows:
我的用户控件生成的HTML如下：
<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 5 来解析它吗？
采纳答案by TiagoDias
https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate
https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate
You can disable the validation in the form.
您可以在表单中禁用验证。
回答by Brandon
回答by Fred K
Put novalidate="novalidate"on <form>tag.
把novalidate="novalidate"上<form>标签。
<form novalidate="novalidate">
...
</form>
In XHTML, attribute minimization is forbidden, and the novalidate attribute must be defined as
<form novalidate="novalidate">.
在 XHTML 中，属性最小化是被禁止的，并且 novalidate 属性必须定义为
<form novalidate="novalidate">.
回答by Towhid
To stop that Html5 popup/balloon in Web-kit browser use following CSS
要停止 Web-kit 浏览器中的 Html5 弹出窗口/气球，请使用以下 CSS
::-webkit-validation-bubble-message { display: none; }
回答by RoToRa
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 propersolution 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:
在适当的解决方案是完全删除您的发明属性和与理智的东西代替它们，例如类（class="Montantetextfield fieldname-Montante required allow-decimal-values"），或存储它们在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.
如果正确的解决方案不可行，则必须重命名它们。在这种情况下，您应该使用前缀data-... 因为这是 HTML5 为此类目的保留的，并且不太可能与某些东西发生冲突 - 但它仍然可以，所以您应该认真考虑第一个解决方案 - 即使它需要更多的工作改变。
回答by Flo
You need to add the attribute "formnovalidate" to the control that is triggering the browser validation, e.g.:
您需要将属性“formnovalidate”添加到触发浏览器验证的控件中，例如：
<input type="image" id="fblogin" formnovalidate src="/images/facebook_connect.png">
回答by chimos
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").
如果您的 html 表单包含一个或多个具有“必填”属性的字段，Chrome（在最新版本中）将在提交表单之前验证这些字段，如果未填写这些字段，则会向用户显示一些工具提示以帮助他们提交表单（即“请填写此字段”）。
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:
为了避免表单中的这种浏览器内置验证，您可以在表单标签上使用“novalidate”属性。浏览器不会验证此表单：
<form id="form-id" novalidate>
<input id="input-id" type="text" required>
<input id="submit-button" type="submit">
</form>
回答by Rex Dexter
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).
在 Chrome 中（我使用的是 v.56，但我认为这通常适用）您可以设置 title=""（一个空格），自动标题文本将被覆盖并且不显示任何内容。（但是，如果您尝试将其设置为空字符串，它会将其视为未设置并添加您已获得的自动工具提示文本）。
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.
我没有在其他浏览器中测试过这个，因为我在制作谷歌浏览器扩展时发现了它。不过，我敢肯定，一旦我将内容移植到其他浏览器，我也会看看它是否也适用于它们（如果有必要的话）。
回答by tomlemes
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! :)
嘿，我们刚刚做了一个全局查找替换，将Required="更改为jRequired="。然后你只需在 jquery 代码中更改它（jquery_helper.js -> Function ValidateControls）。现在我们的验证和以前一样继续，Chrome 让我们无所事事！:)
