“此时元素 div 上不允许使用属性名称”答案

【问题标题】："Attribute name not allowed on element div at this point"“此时元素 div 上不允许使用属性名称”
【发布时间】：2011-06-25 03:02:45
【问题描述】：

我收到一个我无法理解的 W3V 验证器错误：

第 31 行，第 61 列：此时元素 div 上不允许使用属性 name。

就是这一行：

<div name="message" class="jGrowl bottom-right errorGrowl"></div>

完整的 HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jGrowl</title>

        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>     
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

        <script type="text/javascript" src="data/awo-jgrowl.js"></script>
        <script type="text/javascript" src="data/shortcut.js"></script>

        <link rel="stylesheet" type="text/css" href="data/awo-jgrowl.css">

        <script type="text/javascript">
            $(document).ready(function() {
                $('div[name=message]').awomsg('Input message', {sticky: true});
            });

            shortcut.add("m",function() {
                $('div[name=message]').awomsg('Input message', {sticky: true});
            });

            shortcut.add("h",function() {
                alert('ur doin it wrong');
            });
        </script>

    </head>
    <body>
        <div name="message" class="jGrowl bottom-right errorGrowl"></div>
    </body> 
</html>

【问题讨论】：

根据下面的答案，这个 W3C 错误消息的问题是表达“此时”。不清楚它是指在当前时间点，在文档中的特定位置，还是在属性元素排序中的特定位置。这是一个糟糕的错误消息。最好离开“此时”部分：“元素 Div 上不允许名称属性。”这将是一个更清晰、更容易理解的错误消息。

标签： html w3c-validation

【解决方案1】：

我找到了一些来自：

Markup Validation Error: "Attribute name not allowed on element at this point" error #HTML5

万一您打算定义自定义属性，您必须在属性前面加上“data-”。

所以在这种情况下，名称将是：data-name=""。

您可以通过'div[data-name="value"]' 引用它。

【讨论】：

帮了我很多。谢谢。

【解决方案2】：

这是一个较晚的回复，但由于此页面刚刚出现在搜索中：

由于 name 属性在某些元素上是不允许的，并且在您可能不想要的形式中具有特殊意义，但是任何以“data-”开头的属性名称都可以用于您自己的目的，我建议使用“ data-name" 属性，如下所示：

<div data-name="message" class="jGrowl bottom-right errorGrowl"></div>

然后你可以写：

$('[data-name="message"]').text("Here is a new message!");

然后通过 jQuery 操作 div。

使用数据属性的优点是它不太可能与您的前端设计人员出于 CSS 目的使用 ID 和类名所做的事情发生冲突。

在我们的办公室里，我们知道 ID 和类是为 CSS 保留的，JavaScript 开发人员应该不理会它们。相反，欢迎前端设计人员更改大多数事物的 ID、类甚至元素类型，前提是他们不会弄乱数据属性。

【讨论】：

【解决方案3】：

错误消息似乎很容易解释。 div 标签上不能有 name 属性。所以你的代码可能看起来像这样：

<div id="message" class="jGrowl bottom-right errorGrowl"></div>

然后使用 id 选择器：

$('div#message')...

【讨论】：

【解决方案4】：

name 属性不是 DIV 元素规范的一部分。 name 通常只对表单元素有效。

见：http://www.w3schools.com/tags/tag_div.asp

【讨论】：

恕我直言，先生，这足以说明手头的问题。坦率地说，与任何可能存在准确性问题的网站相比，您对我选择的链接的狙击远没有那么有用。感谢您试图让每个人都知道，但我认为这不是您讨伐第三方网站的合适场所。
虽然我同意它在说明这一点方面是准确的，但 w3schools 在此类问题上充斥着错误，这使得它怀疑任何可靠的参考。不过，他当然可以更圆滑。

【解决方案5】：

div 元素没有name 属性。

如果您想唯一标识一个，请使用id。

如果您想将某人标记为群组成员，请使用class。

您可以使用name 属性（尚未弃用）的唯一位置是表单控件（input、select、textarea 和button）。

【讨论】：