Validating XHTML with Javascript
May 13th, 2008 Becky Peters Posted in (X)HTML Tricks & Tips, CSS Tricks & Tips, Javascript Snippets & Help, Validation Tips | 2 Comments »
One of the challenges we face when creating and maintaining a standards-compliant XHTML site comes when adding a snippet of code, or including a larger piece of code, written in Javascript and authored by someone else. Why can that pose a challenge? If the code is older or the author is not concerned with XHTML coding standards the code may contain something that causes the validator to throw an error, or it may generate XHTML code that is not in compliance with current standards.
Inquiring minds might pipe up and mention at this point that “in the good old’ days the validator didn’t parse Javascript!” So what’s changed?
In the old days anything between <script></script> was considered CDATA (character data) and ignored by the markup validator. In the here and now it’s considered PCDATA (parsed character data) and it gets parsed! So what’s an intrepid standards-compliant coder to do?
Cleaning up snippets of JS inserted into your page code
A common reason that a web page might be found invalid by the markup validator is due to inserting an older snippet of JS related to some type of interactivity into the page. For instance, adding an onClick event handler:
<A HREF="yourlink.html" onClick="something here">Your Link</A>
This is a no brainer, right? No one can trick you… you know that A HREF is going to be a problem. No Capitalization of Elements is allowed in XHTML! So you fix that:
<a href="yourlink.html" onClick = "something here">Your Link</a>
And when you validate the page you see…
Yikes. Well at least the validator is clear about what the actual problem is… it’s the onClick attribute. Attribute? Yep, that’s an attribute just like an image has attributes of height and width. Just like the element, an attribute cannot contain capital letters. When it’s an attribute related to JS we sometimes don’t think of it as being part of our code, it’s JS and we get all confused! “-)
The validator also tells you how to fix it!
Line 9, Column 42: there is no attribute “onClick”. How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case)
So clean it up as follows:
<a href="yourlink.html" onclick = "something here">Your Link</a>
And now you see…
Cleaning up JS code added to the <head></head> of your page code
This is a bit more complex to troubleshoot and fix, because there could be one or more reasons the included JS doesn’t validate.
1. Did you use the correct syntax for including the JS in your page?
<script type="text/javascript"> ... content of your Javascript goes here ... </script>
2. Does the script include <, >, & and ” as characters?
If so, you cannot change them to special characters for XHTML purposes or the script won’t execute. So you need to put the script inside a “CDATA Wrapper”. The way you do this depends on the MIME type you are declaring:
a. XHTML 1.x served with a MIME type of “text/html”; if this is how you serve your pages, use this wrapper:
<script type="text/javascript"> //<![CDATA[ ... content of your Javascript goes here ... //]]> </script>
b. XHTML 1.x served with a MIME type of “application/xml” OR “text/xml”; if this is how you serve your pages, use this wrapper:
<script type="text/javascript"> <![CDATA[ ... content of your Javascript goes here ... ]]> </script>
Warning: If you use the wrong wrapper the script will not work!
3. What if the script requires the use of deprecated attributes in your XHTML Strict page code?
This could require some research on your part! Let’s take a simple snippet of JS where it locates a form element based on the deprecated “name” attribute:
document.myformxyz.submit();
The script will look for this form (this is an example, not the complete syntax!):
<form name="myformxyz" ... >Using a “name” attribute will not validate if you are using XHTML 1.x Strict! So instead you need to change it to find the form using an “id”:
document.forms['myformxzy'].submit();
Which will look for (this is an example, not the complete syntax!):
<form id="myformxyz" ... >And that WILL validate as XHTML 1.x Strict! “-)
4. What if the page was valid until the JS was added but you used the CDATA wrapper properly or the script is being included externally (see below for more details on this process)?
Sometimes a script will write code to the page before it is served to the browser; that code may not be valid, depending on the author and/or how long ago the script was written. It will be up to you to fix the XHTML code contained within the JS so that if/when it is written to your page it will be valid. This may take you a bit of hit and miss work, making changes, testing the form function, validating it, repeat, repeat, repeat until everything validates AND works correctly.
Let’s apply this to a hypothetical scenario.
Assumptions: a simple validation script that verifies specific information is input in a form before it is submitted. If a required piece of information is missing, the script rewrites the page with the supplied content and adds bold, red text next to the input box that must be completed.
When you first load the form web page it is valid code. Then you try to submit the form with a required piece of information missing; the resulting page is displayed with all your input and with big red bold letters saying “Missing Info” next to the input box you left blank. Pretty!
Let’s validate it… OOPS! Now the page doesn’t pass markup validation.
When you look at the results from the W3C validator, it says <font color=”red”> is not a valid element. You dutifully view the page source in your browser. Yep, the validator is right, a <font> tag has been inserted. Where did that come from… you know you didn’t use it, right?!
If you look at the JS you’ll find it’s the culprit. There will be a line or lines that includes the JS equivalent of “if this data is missing, print “<font color=”red”>Missing Info</font>”.
Once you’ve cleaned up all instances of that code and replaced it with valid XHTML code, you should be able to test the form and validate it properly even when you leave out required information.
Including an External JS File
The easiest way to include Javascript and not have to worry about validation errors is by calling it as an external include:
<script src="path-to-script/name-of-script.js" type="text/javascript"></script>
Again, this element is placed in the <head></head> section of your code.
One thing to keep in mind, however, is that any event handlers you add to call the functions within that script (“Cleaning up snippets of JS inserted into your page code” above) or any code that script may write into your page (“Cleaning up JS code added to the <head></head> of your page code”, #4 above) may still need some work on your part.
Conclusion
Is it all as clear as mud now? Does it sound intimidating or like it’s too much work? Don’t give up just yet — we’ve got just the thing to put you on the straight and narrow. You can become a JS Modification Guru! It’s as easy as clicking on this link:
Javascript Modification @ LVS http://www.lvsassociates.com/register/product_info.php?products_id=54
July 10th, 2008 at 1:55 am
I enjoyed your writing style and I’ve added you to my Reader. Keep these posts coming.
July 15th, 2008 at 6:49 pm
anybody here know of a good site to find more info on javascript event handlers? I\’ve got this site bookmarked and im gonna keep checking it out, but i still would like to find a site that covers javascript event handlers a little more thoroughly..thanks