CODEWITHSUNDEEP
jqueryvalidationxhtml-1.0-strictxhtml
emanu
emanu

Reputation: 73

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?

Upvotes: 3

Views: 1023

Answers (3)

David Lantner
David Lantner

Reputation: 561

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:

  1. XHTML 1.0 recommendation: 4.8. Script and Style elements
  2. Properly Using CSS and JavaScript in XHTML Documents

Upvotes: 8

RedWolves
RedWolves

Reputation: 10395

If you put HTML comment tags into your script block the validator will ignore that block of code and validate correctly.

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

Upvotes: 8

tvanfosson
tvanfosson

Reputation: 532765

You could probably get rid of the errors by doing:

$('#s4').before('<' + 'div id="nav">').cycle({ ...

This should keep the validator from detecting any HTML inside your script tag. Me - I'd live with the error, knowing it was a problem with the validator not my code.

Upvotes: 1

Related Questions