logo标签列表

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

htmlgoogle-chromepopup
72

我的客户联系我说，用户抱怨某些字段现在显示了一个带有消息“Please Fill out This Field”的工具提示。我简直不敢相信我听到的...但是客户是对的-使用最新的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">

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

我们需要一个此操作的屏幕截图。 - user229044
9个回答
58
你是否在使用HTML5中的 required 属性？
这会导致Chrome 10显示一个气球提示用户填写该字段。
不，我不是。只有简单的HTML。 - TiagoDias
Brandon，在初始帖子中。 - TiagoDias
13
您正在使用HTML5的required属性。HTML4中没有required属性 - http://www.w3.org/TR/html4/index/attributes.html。移除required属性，您的代码将正常运行。请在http://validator.w3.org上验证您的代码。 - sunn0
4
他并没有真正地“使用HTML5的required属性”，他发明了自己的属性，而这个属性现在与同名的HTML5属性产生冲突。 - RoToRa
6
如果不想让它被当作HTML5必需属性，使用"data-required='true'"代替"required='true'"。 - Alex K
46
20
我在一个AngularJS应用程序中遇到了这个问题。原因是没有在<form>标签中包含novalidate属性。 - Mark
如果您在SharePoint中有一个Angular应用程序，请确保将其添加到页面查看器Web部件中。当您尝试编辑页面时，novalidate未被触发。 - Chad
38

在 <form> 标签上添加 novalidate="novalidate" 属性。

<form novalidate="novalidate">
...
</form>
在XHTML中，禁止使用属性最小化，并且novalidate属性必须定义为<form novalidate="novalidate">。

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

如果您添加了这个，那么该属性实际上将不起作用 - 它只会提交而不检查必填字段。 - B T
@BT 这是预期的行为。没有验证意味着没有验证。 - tlt
@tlt 好的，也许这是基于某些规范的预期，但它并不能解决OP（或我的）问题。以前，您可以使用验证器，并将自己的错误消息适当地样式化到您的网站上。现在似乎如果您不想让浏览器将丑陋的标准UI元素塞入应用程序中，则无法使用HTML验证器。 - B T
12

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

::-webkit-validation-bubble-message { display: none; }
3
这个不再起作用。 - Damian Green
9

正如我在你的另一个问题中提到的:

问题出在你发明了自己的非标准属性(这本来就不应该做)，现在新的标准化属性(或正在标准化的属性)与它们冲突。

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

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

如果没有可行的解决方案，您将不得不重新命名它们。在这种情况下，您应该使用前缀data-...因为HTML5为此保留了它，并且不太可能与其他内容发生冲突 - 但仍然有可能，因此您应该认真考虑第一种解决方案 - 即使更改工作量更大。

3
如果您有一个含有一个或多个带“required”属性的字段的HTML表单，Chrome（在最新版本上）将在提交表单之前验证这些字段，并且如果它们未填写，则会向用户显示一些提示工具，以帮助他们提交表单（例如，“请填写此字段”）。
为了避免浏览器在表单中内置的验证，您可以在表单标记上使用“novalidate”属性。这个表单不会被浏览器验证。
<form id="form-id" novalidate>

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

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

</form>
3
在Chrome浏览器中（我使用的是v.56，但据我所知，这通常适用），您可以将title =“”（一个空格）设置为自动标题文本将被覆盖并且不会显示。 （如果您尝试使其为空字符串，则它将视为未设置并添加您一直收到的自动工具提示文本）。因为我发现这个方法是在制作Google Chrome扩展程序时发现的，所以我还没有在其他浏览器中测试过它。不过，我相信一旦我将东西转移到其他浏览器中，我也会看到它们是否起作用（如果有必要的话）。
3
您需要在触发浏览器验证的控件上添加属性 "formnovalidate"，例如：
<input type="image" id="fblogin" formnovalidate src="/images/facebook_connect.png">
1

嘿，我们刚刚进行了全局查找替换，将Required="更改为jRequired="。然后在jquery代码中也要进行更改（jquery_helper.js-> Function ValidateControls）。现在我们的验证继续以前的方式进行，Chrome不再干扰我们！:)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接