jquery validation xhtml-1.0-strict xhtml

why won't this validate (jquery problem)?

On my site I'm using the jquery cycle plugin for a slideshow with a pager. This example: http://malsup.com/jquery/cycle/pager.html

So in the head of my document, I have a script similar to:

<script type="text/javascript">
$('#s4').before('<div id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 3000, 
    pager:  '#nav' 
});
</script>

My doc type is XHTML Strict.

When I try and validate the page, I get the following errors: "document type does not allow element "div" here" and "end tag for "div" omitted, but OMITTAG NO was specified" because the div tag isn't closed.

Is there a way to use the jquery and get it to validate?

Solution

Actually, the reason your code is not validating is because certain characters are not allowed in XHTML (e.g. "<", etc.) so they must be wrapped in CDATA sections in XHTML (due to the strict nature of XML parsing rules). HTML comment markers (specfically, the double dashes "--") are also not allowed and shouldn't appear in a SCRIPT block since they're not ~~valid~~ understandable JavaScript. So instead of using HTML comment markers, you should wrap your code inside a "CDATA marked section" to pass the validator and not confuse the JavaScript engines:

<script type="text/javascript">
//<![CDATA[
$('#s4').before('<div id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 3000, 
    pager:  '#nav' 
});
//]]>
</script>

Take a look at the following pages for more information: