web-dev-qa-db-fra.com

"Nom d'attribut non autorisé sur l'élément div à ce stade"

Je reçois une erreur de validation W3V que je ne comprends pas:

Ligne 31, colonne 61: L'attribut name n'est pas autorisé sur l'élément div à ce stade.

C'est cette rangée:

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

Full 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>
htmlhtml5w3c-validation
25
Thew

Le message d'erreur semble assez explicite. Vous ne pouvez pas avoir d'attribut name sur une balise div. Donc, votre code pourrait ressembler à ceci:

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

puis utilisez les sélecteurs d'identifiant:

$('div#message')...
20
Darin Dimitrov

J'ai trouvé une entrée de: 

Erreur de validation du balisage: erreur "Nom de l'attribut non autorisé sur l'élément à ce stade" # HTML5

Juste au cas où vous avez l'intention de définir un attribut personnalisé, vous devez ajouter cet attribut avec "data-". 

Donc, dans ce cas, le nom serait: data-name="". 

Et vous pouvez le référencer par 'div[data-name="value"]'. 

21
Ross

Il n'y a pas d'attribut name pour les éléments div.

Si vous souhaitez en identifier un seul, utilisez id.

Si vous souhaitez en marquer un en tant que membre d'un groupe, utilisez class.

Le seul endroit où vous pouvez utiliser un attribut name (qui n'est pas obsolète) se trouve dans les contrôles de formulaire (input, select, textarea et button).

16
Quentin

Ceci est une réponse tardive, mais depuis que cette page est apparue dans une recherche:

Étant donné que l'attribut name n'est pas autorisé sur certains éléments et revêt une importance particulière dans les formulaires que vous ne souhaitez peut-être pas mais que tout nom d'attribut commençant par "data-" peut être utilisé à vos propres fins, je vous recommande d'utiliser le "nom-donnée "attribut, comme ceci:

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

Vous pouvez alors écrire:

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

Et sinon, manipulez la div via jQuery.

L'utilisation d'attributs de données a pour avantage qu'il est peu probable que cela entre en conflit avec ce que vos concepteurs front-end peuvent faire avec des identifiants et des noms de classes à des fins CSS. 

Dans notre bureau, nous savons que les identifiants et les classes sont réservés au CSS, et que les développeurs JavaScript doivent les laisser seuls. Inversement, les concepteurs frontend sont invités à modifier l'ID, les classes ou même le type d'élément de la plupart des choses, à condition de ne pas déranger les attributs de données.

8
Tom Boutell

L'attribut name ne fait pas partie de la spécification des éléments DIV. name n'est, en général, valable que sur les éléments de formulaire.

Voir: http://www.w3schools.com/tags/tag_div.asp

1
Chris Baker