为什么 Chrome 在空白字段上显示“请填写此字段”工具提示？答案

【问题标题】：Why is Chrome showing a "Please Fill Out this Field" tooltip on empty fields?为什么 Chrome 在空白字段上显示“请填写此字段”工具提示？
【发布时间】：2011-07-20 13:21:46
【问题描述】：

我的客户联系我说，用户投诉说某些字段现在显示带有消息“请填写此字段”的工具提示。我简直不敢相信我所听到的......但是客户端是正确的 - 使用最新的 Chrome 版本，某些字段会显示带有此消息的浏览器工具提示，甚至与我的验证器并排显示！

有什么问题？我错过了什么？

谢谢。

编辑：

我的用户控件生成的HTML如下：

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

编辑：

我的文档类型如下：

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

我的浏览器应该使用 HTML 5 来解析它吗？

【问题讨论】：

我们需要一个实际的截图

标签： html google-chrome popup

【解决方案1】：

您是否使用 HTML5 required 属性？

这将导致 Chrome 10 显示一个提示用户填写字段的气球。

【讨论】：

不，我不是。仅简单的 html
布兰登，在最初的帖子中。
您正在使用 HTML5 必需属性。 HTML4 中没有必需的属性 - w3.org/TR/html4/index/attributes.html。删除所需的属性，你会没事的。在validator.w3.org 验证您的代码
@sunn0：他并没有真正“使用 HTML5 required 属性”。他发明了自己的属性，现在与同名的 HTML5 属性发生冲突。
如果您不希望它作为 html5 必需属性被拾取，请使用 data-required="true" 而不是 required="true"

【解决方案2】：

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

您可以在表单中禁用验证。

【讨论】：

我在 AngularJS 应用程序中遇到了这个问题。这是由于
标签中没有包含 novalidate 属性造成的。
如果您在 SharePoint 中有一个 Angular 应用程序，请确保将其添加到页面查看器 Web 部件中。当您尝试编辑页面时，不会触发 novalidate。

【解决方案3】：

将novalidate="novalidate" 放在<form> 标记上。

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

在 XHTML 中，属性最小化是被禁止的，并且 novalidate 属性必须定义为<form novalidate="novalidate">。

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

【讨论】：

如果您添加此属性，则该属性实际上将不起作用 - 它只是在没有必填字段的情况下提交。
@BT 这是预期的行为。没有验证意味着没有验证。
@tlt 好的，这可能是基于某处的一些规范，但它不能解决 OPs 问题（或我的问题）。以前，您可以使用验证器并将自己的错误消息设置为适合您网站的样式。现在，如果您不希望浏览器将丑陋的标准 UI 元素推入您的应用程序，您似乎无法使用 html 验证器。

【解决方案4】：

要停止 Web-kit 浏览器中的 Html5 弹出/气球，请使用以下 CSS

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

【讨论】：

这不再有效。 stackoverflow.com/questions/5713405/…

【解决方案5】：

正如我提到的in your other question：

与这个事实有关的问题是，您发明了自己的非标准属性（一开始就不应该这样做），而现在新的标准化属性（或正在标准化过程中的属性）是与他们相撞。

正确的解决方案是完全删除您发明的属性并将其替换为一些合理的东西，例如类 (class="Montantetextfield fieldname-Montante required allow-decimal-values")，或者将它们存储在 JavaScript 中：

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

如果正确的解决方案不可行，您将不得不重命名它们。在这种情况下，您应该使用前缀 data-... 因为这是 HTML5 为此类目的保留的，并且它不太可能与某些东西发生冲突 - 但它仍然可以，所以你应该认真考虑第一个解决方案 - 即使它是更多的工作需要改变。

【讨论】：

【解决方案6】：

您需要在触发浏览器验证的控件中添加属性“formnovalidate”，例如：

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

【讨论】：

【解决方案7】：

如果您的 html 表单包含一个或多个具有“必填”属性的字段，Chrome（在最新版本中）将在提交表单之前验证这些字段，如果未填写，则会向用户显示一些工具提示帮助他们提交表单（即“请填写此字段”）。

要避免表单中的浏览器内置验证，您可以在表单标签上使用 "novalidate" 属性。此表单不会被浏览器验证：

<form id="form-id" novalidate>

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

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

</form>

【讨论】：

【解决方案8】：

在 Chrome 中（我正在使用 v.56，但我认为这通常适用）您可以设置 title=" "（一个空格），并且自动标题文本将被覆盖并且不显示任何内容。（但是，如果您尝试将其设为空字符串，它会将其视为未设置并添加您已获得的自动工具提示文本）。

我没有在其他浏览器中测试过这个，因为我是在制作谷歌 Chrome 扩展时发现的。不过，我确信一旦将内容移植到其他浏览器，我会看看它是否也适用于它们（如果有必要的话）。

【讨论】：

【解决方案9】：

嘿，我们刚刚进行了全局查找替换，将 Required=" 更改为 jRequired="。然后你也只需在 jquery 代码中更改它（jquery_helper.js -> Function ValidateControls）。现在我们的验证像以前一样继续，Chrome 让我们独自一人！ :)

【讨论】：