W3 xHTML Validation Errors on jQuery code!

Question

I have some jQuery code that, without it in the document it passes validation fine, but with it in it causes errors. The code in question is here:

    $.ajax({
        type: "GET",
        url: "data.xml",
        dataType: "xml",
        success: function(xml) {

            //Update error info
            errors = $(xml).find("Errors").find("*").filter(function ()
            {
                return $(this).children().length === 0;
            });

            if (errors.length == 0)
            {
                statuscontent = "<img src='/web/resources/graphics/accept.png' alt='' /> System OK";
            }
            else
            {
                statuscontent = "<img src='/web/resources/graphics/exclamation.png' alt='' /> "+errors.length+" System error"+(errors.length>1?"s":"");
            }

            $("#top-bar-systemstatus a").html(statuscontent);

            //Update timestamp
            $("#top-bar-timestamp").html($(xml).find("Timestamp").text());

            //Update storename
            $("#top-bar-storename").html("Store: "+$(xml).find("StoreName").text());
        }
    });

There are loads of other jQuery code on the page which all works fine and causes no errors so I cannot quite understand what is wrong with this. The page isn't "live" so cannot provide a link to it unfortunately.

The error it lists is

document type does not allow element "img" here

And the line of code it points to is here:

 statuscontent = "<img src='/web/resources/graphics/accept.png' alt='' /> System OK";

It also has an issue with the next assignment to statuscontent

@Gumbo agree, unless your hoster is punishing you with request limits. — user142019
– user142019, Commented Feb 2, 2011 at 15:36

score 8 · Accepted Answer · 2011-02-02 15:42:52Z

8

It's because you are using XHTML. This is invalid indeed as the validator acts as if the code between the script tags is XML (XHTML is a subset of XML). This is invalid XHTML, as img-tags don't belong inside of script-tags.

To make it validate, use CDATA to escape any XML within your script.

<script type="text/javascript">
// <![CDATA[

... your code
// ]]>
</script>

In HTML 5 this is not an issue. If you make a new website I'd recommend HTML 5 over XHTML. Use XHTML only if you are modifying an existing website.

edited Feb 2, 2011 at 15:42

answered Feb 2, 2011 at 15:21

user142019

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Over a year ago

If I do this Firebug reports a syntax error on the <![CDATA[ line. Also this website has to be compatible with older browser versions so unfortunately cannot depend on HTML5

Quentin · Accepted Answer · 2011-02-02 15:20:23Z

1

See Script and Style Elements in The Differences From HTML 5.

Next see the comparable section in the XHTML Media Types document since you are almost certainly serving your XHTML as HTML for IE compatibility.

(Then you'll probably do what I did back in '99 which is to throw you hands up in the air, scream "What's the point of using XHTML if I have to pretend it is HTML?!" and run back to HTML 4.01. (Or possibly onto HTML 5))

answered Feb 2, 2011 at 15:20

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

1 Comment

Chris Over a year ago

That sorted the W3 errors out, thanks, for some reason in IE though I get script errors. No errors in W3 validation OR in Firebug console either.

Collectives™ on Stack Overflow

W3 xHTML Validation Errors on jQuery code!

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related