W3C validators, Ajax & SOAP: a different way to test markup and CSS validity

This experiment is the work of its author and has no endorsement whatsoever. It is for now is far from being bullet-proof. This document captures the work done and the lessons learned.

Background

People use the Valid HTML logo to show that their page is valid, whether it really is or not. Wanting to play with Ajax and use the SOAP interface of the mark-up validator, I wanted to try to make this logo more dynamic: allow one to check, on the page, whether it is valid or not.

I wanted to call to the SOAP call directly from the page, which turned out to be impossible, as for security reasons XMLHttpRequest() only works on the same domain as the document, and I need to do a SOAP call on the W3C validator server.

So I found the following trick while looking around: use an inline frame from the W3C validator server. And because I need to pass the URL of the document to validate, I ended up needing some extra JavaScript.

How to use it

Edit your document as follows:

Choose an unused id, e.g. my-validator.

There are two options here:

Add to the head of an XHTML file:

<script type='text/javascript'>
  window.addEventListener("load", function(){addButton('my-validator');}, true);
</script>
<script type='text/javascript' src='http://qa-dev.w3.org/~hugo/aval/validator-iframe.js'>
</script>

Or, for a solution which will work in a larger number of browsers, add the following to the head of an XHTML file:
```
<script type='text/javascript' src='http://qa-dev.w3.org/~hugo/aval/validator-iframe.js'>
</script>
```
and the following attribute to the body element:
```
<body onload="addButton('my-validator'); return true;">
```

Add the following somewhere in the body:
```
<div id='my-validator' />
```

This shows an inline frame as follows:

Clicking on Check? will tell you if this page is both HTML and CSS valid or not.

This is more complex than the simple single JavaScript call I had originally envisioned, and in the end since I ended up using an inline frame, it's something that could have been done in other ways such as by using a CGI script instead of a document using Ajax, but this was an Ajax experiment so I decided to go all the way with it.

Examples

Source code

The source code is available on dev.w3.org. To get it from CVS:

bash$ export CVSROOT=":pserver:anonymous@dev.w3.org:/sources/public"
bash$ cvs login
(Logging in to anonymous@dev.w3.org)
CVS password: anonymous
bash$ cvs get 2006/aval

Ideas to continue this work

Give more information: number of errors, link to validation results, etc.
Make it look better: use images
Make sure it works with all browsers or fail gracefully

Thanks to Olivier Théreaux for his feedback and Philippe Le Hégaret for his help with DOMParser.

Hugo Haas
$Id: Overview.html,v 1.24 2006/02/22 10:16:00 hugo Exp $