CODEWITHSUNDEEP
htmlw3c-validation
Thew
Thew

Reputation: 15959

"Attribute name not allowed on element div at this point"

I am getting a W3V validator error that I can't understand:

Line 31, Column 61: Attribute name not allowed on element div at this point.

That is this row:

<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>

Upvotes: 35

Views: 99348

Answers (5)

Ross
Ross

Reputation: 609

I found some entry from:

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

Just in case you intend to define a custom attribute, you have to prepend the attribute with "data-".

So in this case, name would be: data-name="".

And you can reference it by 'div[data-name="value"]'.

Upvotes: 29

Tom Boutell
Tom Boutell

Reputation: 7572

This is a late response, but since this page just came up in a search:

Since the name attribute is not permitted on certain elements and has special significance in forms which you may not want, but any attribute name starting with "data-" is acceptable to use for purposes of your own, I recommend using the "data-name" attribute, like this:

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

You can then write:

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

And otherwise manipulate the div via jQuery.

The use of data attributes has the virtue that it is unlikely to conflict with what your frontend designers may be doing with IDs and class names for CSS purposes.

In our office we have an understanding that IDs and classes are reserved for CSS, and JavaScript developers should leave them alone. Conversely, frontend designers are welcome to change the ID, classes or even element type of most things, provided that they don't mess with the data attributes.

Upvotes: 9

Darin Dimitrov
Darin Dimitrov

Reputation: 1039238

The error message seems pretty self explanatory. You cannot have a name attribute on a div tag. So your code could look like this:

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

and then use id selectors:

$('div#message')...

Upvotes: 23

Chris Baker
Chris Baker

Reputation: 50612

The name attribute is not part of the specification for DIV elements. name is, generally speaking, only valid on form elements.

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

Upvotes: 1

Quentin
Quentin

Reputation: 944110

There is no name attribute for div elements.

If you want to uniquely identify one, then use id.

If you want to mark one as a member of a group, then use class.

The only place you can use a name attribute (that hasn't been deprecated) is on form controls (input, select, textarea and button).

Upvotes: 19

Related Questions