validation - How do you write Valid XHTML 1.0 Strict code when you are using javascript to fill an element that requires a child

admin管理员组

文章数量:1315227

I'm running my site through the W3C's validator trying to get it to validate as XHTML 1.0 Strict and I've gotten down to a particularly sticky (at least in my experience) validation error. I'm including certain badges from various services in the site that provide their own API and code for inclusion on an external site. These badges use javascript (for the most part) to fill an element that you insert in the markup which requires a child. This means that in the end, perfectly valid markup is generated, but to the validator, all it sees is an inplete parent-child tag which it then throws an error on.

As a caveat, I understand that I could plain to the services that their badges don't validate. Sans this, I assume that someone has validated their code while including badges like this, and that's what I'm interested in. Answers such as, 'Complain to Flickr about their badge' aren't going to help me much.

An additional caveat: I would prefer that as much as possible the markup remains semantic. I.E. Adding an empty li tag or tr-td pair to make it validate would be an undesirable solution, even though it may be necessary. If that's the only way it can be made to validate, oh well, but please lean answers towards semantic markup.

As an example:

<div id="twitter_div">
<h2><a href="">@Twitter</a></h2>
<ul id="twitter_update_list">
<script type="text/javascript" src=".js"></script>
<script type="text/javascript" src=".json?callback=twitterCallback2&amp;count=1"></script>
</ul>
</div>

Notice the ul tags wrapping the javascript. This eventually gets filled in with lis via the script, but to the validator it only sees the unpopulated ul.

Thanks in advance!

I'm running my site through the W3C's validator trying to get it to validate as XHTML 1.0 Strict and I've gotten down to a particularly sticky (at least in my experience) validation error. I'm including certain badges from various services in the site that provide their own API and code for inclusion on an external site. These badges use javascript (for the most part) to fill an element that you insert in the markup which requires a child. This means that in the end, perfectly valid markup is generated, but to the validator, all it sees is an inplete parent-child tag which it then throws an error on.

As a caveat, I understand that I could plain to the services that their badges don't validate. Sans this, I assume that someone has validated their code while including badges like this, and that's what I'm interested in. Answers such as, 'Complain to Flickr about their badge' aren't going to help me much.

An additional caveat: I would prefer that as much as possible the markup remains semantic. I.E. Adding an empty li tag or tr-td pair to make it validate would be an undesirable solution, even though it may be necessary. If that's the only way it can be made to validate, oh well, but please lean answers towards semantic markup.

As an example:

<div id="twitter_div">
<h2><a href="http://twitter./stopsineman">@Twitter</a></h2>
<ul id="twitter_update_list">
<script type="text/javascript" src="http://twitter./javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter./statuses/user_timeline/stopsineman.json?callback=twitterCallback2&amp;count=1"></script>
</ul>
</div>

Notice the ul tags wrapping the javascript. This eventually gets filled in with lis via the script, but to the validator it only sees the unpopulated ul.

Thanks in advance!

• javascript
• validation
• twitter
• w3c-validation
• xhtml-1.0-strict

Share Improve this question Follow edited Oct 15, 2008 at 18:53 Joe Lencioni 10.5k1818 gold badges5757 silver badges6868 bronze badges asked Sep 29, 2008 at 17:48 Tim VisherTim Visher 12.9k1616 gold badges6060 silver badges6767 bronze badges 1

• Looks like Twitter are using a callback that inserts the xhtml. For Twitter, you could open twitter./javascripts/blogger.js and check out twitterCallback2() and change it to work the way you prefer. Just pass the new callback function name into the callback param in the second script tag. – Joe Lencioni Commented Sep 29, 2008 at 19:21

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 7

The following fragment is valid XHTML and does the job:

<div id="twitter_div">
    <h2 class="twitter-title"><a href="http://twitter./stopsineman" title="Tim's Twitter Page.">Twitter Updates</a></h2>
    <div id="myDiv" />
</div> 

<script type="text/javascript">
    var placeHolderNode = document.getElementById("myDiv");
    var parentNode = placeHolderNode.parentNode;
    var insertedNode = document.createElement("ul");
    insertedNode .setAttribute("id", "twitter_update_list");
    parentNode.insertBefore( insertedNode, placeHolderNode);
    parentNode.remove(placeHolderNode);
</script>
<script type="text/javascript" src="http://twitter./javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter./statuses/user_timeline/stopsineman.json?callback=twitterCallback2&amp;count=5"></script>

Perhaps you could use javascript to write the initial badge HTML? You'd probably only want the badge code to be inserted in your document if javascript were available to populate it, right?

You'd just need to make sure your document writing happens before the javascript for your various badges.

Could you give a specific example of the HTML / link to a page with the invalid code?

The solutions might be different for each badge. In Twitter's case, you can just write your own callback function. Here's an example based on their badge code:

<div id="twitter_div">
  <h2><a href="http://twitter./stopsineman">@Twitter</a></h2>
  <div id="twitter_update_list"></div>
</div>

<script type="text/javascript">
function updateTwitterCallback(obj)
{
  var twitters = obj;
  var statusHTML = "";
  var username = "";
  for (var i = 0; i < twitters.length; i++)
  {
    username = twitters[i].user.screen_name;
    statusHTML += ('<li><span>' + twitters[i].text + '</span> <a style="font-size:85%" href="http://twitter./' + username + '/statuses/' + twitters[i].id + '">' + relative_time(twitters[i].created_at) + '</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = '<ul>' + statusHTML + '</ul>';
}
</script>
<script type="text/javascript" src="http://twitter./javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter./statuses/user_timeline/stopsineman.json?callback=updateTwitterCallback&amp;count=1"></script>

I put a <li> with "display:none" in the <ul> Tag:

<ul id="twitter_update_list"><li style="display:none;">A</li></ul>

<script type="text/javascript" src="http://twitter./javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter./statuses/user_timeline/01241.json?callback=twitterCallback2&amp;count=1"></script>

This does not disturb the script and in this case it works, and I think its not a "undesirable solution" :)

At some point the page bees valid, right? That's the only time it can really be validated.

I'm not sure a non-trivial page will remain valid at every point during its construction if it's constructed with a lot of DOM scripting.

This might not be the most popular opinion on this topic, but...

Don't worry about 100% validation. It's just not that big of a deal.

The point of validation is to make your markup as standard as possible. Why? Because browsers that are given markup that doesn't conform to the spec (eg, markup that does not validate) do their own error checking to correct it and display the page the way you intended it to look to the user. The quality of the browsers error checking varies, yadda-yadda-yadda, it's better to have valid markup... But it's not even your code that's causing the validation to fail! The people who wrote those badges probably tested them in multiple browsers (and you should do the same, of course), if they work as expected then just leave it at that.

In short, there's no prize for validating :)

本文标签：