TJKDesign: Home Page

ez-css Putting the 'less' in table-less layouts. css-101 logo
Bookmark this article at these sites:

Using Javascript to generate validation links on the fly...

Today on the WSG (Web Standards Group), a member requested "a snippet that can generate xhtml/css validation links".

This is what this article is about, a simple solution to create links to the CSS, HTML, Section 508 and WAI Validators.
It is a script that builds the query string on the fly, including the document path as search parameter.

The Markup

You'd start with this set of links (you may replace text links with icons):

<ul id="TJK_validators">
<li><a href="http://jigsaw.w3.org/css-validator/">Validate CSS</a></li>
<li><a href="http://validator.w3.org/check?verbose=1&amp;uri=referer">Validate (X)HTML</a></li>
<li><a href="http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=-1">Validate Section 508</a></li>
<li><a href="http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=2">Validate WAI</a></li>
</ul>

Important You do not have to use an Unordered List (UL), but you need to use "TJK_validators" as the ID value of the HTML element that contains these links. This is because the script uses this ID to find the anchors.

The Script

Download TJK_validators.zip (2 KB) and unzip the file into a directory within your site. Then, use a SCRIPT element to link the JS file (TJK_validators.js) to your pages within the HEAD element of your documents, as shown below:

<script type="text/javascript" src="/js/TJK_validators.js"></script>
</head>

Note: In this case, the file has been saved inside a directory called "JS" within the root folder.

Use the onload attribute of the body element to call the function; for example: <body onload="TJK_validators()"> or, better, use a technique like the one explained here: executing JavaScript on page load.

Important If you pass true to the function, as in TJK_validators(true), then these links will open a new window and add a string to the title attribute (if there is one already), or create a title attribute using "Open in new window" for value.

Things to consider

If you use Dreamweaver Templates or such, you may want to give the echo directive a try.

To find out if you can use this directive, simply include the following in the body element of any page:

<!--#echo var="DATE_LOCAL" -->

If the output looks like this:
Wednesday, April 16, 2014 8:58:28 AM
you have a winner!

Then you would only need the following markup in your template (without the script).

<ul>
<li><a href="http://jigsaw.w3.org/css-validator/validator?profile=css&amp;uri=http://<!--#echo var="SERVER_NAME" --><!--#echo var="DOCUMENT_URI" -->">Validate CSS</a></li>
<li><a href="http://validator.w3.org/check?verbose=1&amp;uri=http://<!--#echo var="SERVER_NAME" --><!--#echo var="DOCUMENT_URI" -->">Validate (X)HTML</a></li>
<li><a href="http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=-1&amp;url1=http://<!--#echo var="SERVER_NAME" --><!--#echo var="DOCUMENT_URI" -->">Validate Section 508</a></li>
<li><a href="http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=2&amp;url1=http://<!--#echo var="SERVER_NAME" --><!--#echo var="DOCUMENT_URI" -->">Validate WAI</a></li>
</ul>

With PHP, use the following markup (without the script).

<ul>
<li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://<?php echo $HTTP_SERVER_VARS['SERVER_NAME'] ?><?php echo $HTTP_SERVER_VARS['SCRIPT_NAME'] ?>">Valid CSS</a></li>
<li><a href="http://validator.w3.org/check?verbose=1&amp;uri=http://<?php echo $HTTP_SERVER_VARS['SERVER_NAME'] ?><?php echo $HTTP_SERVER_VARS['SCRIPT_NAME'] ?>">Valid HTML</a></li>
<li><a href="http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=-1&amp;url1=http://<?php echo $HTTP_SERVER_VARS['SERVER_NAME'] ?><?php echo $HTTP_SERVER_VARS['SCRIPT_NAME'] ?>">Section 508</a></li>
<li><a href="http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=2&amp;url1=http://<?php echo $HTTP_SERVER_VARS['SERVER_NAME'] ?><?php echo $HTTP_SERVER_VARS['SCRIPT_NAME'] ?>">WAI Guidelines</a></li>
</ul>

Please use this contact form to send feedback and report errors.