Did you ever created a website that validated according to W3C, placed a “valid” Icon / Text on your site and after some days / weeks / months you had to notice that the site became invalid? To me this happens pretty often, mainly when I have to create a CMS based website for a customer. Everything validates perfectly until the customer begins to mess it up with his own HTML. Of course the “valid” Icon then loses his usefulness.

For a new project I was looking out for a script that would validate the current site in the background and only show a “valid” Icon if the current site passed validation. So I searched for such a solution but didn’t find anything useful and ended up writing it myself.
I came up with a jQuery Plugin that does exactly what I wanted it to do: it validates the current site (using the online W3C Validator), checks the result and shows then some HTML (”valid” Icon, Text or whatever) for both possible results (valid, invalid).

The Plugin consists of a JavaScript file (what you would call the ‘plugin’) and a PHP file. Latter does the validation (URL file access can be disabled, it’s done with cURL and should work for everyone).
Here’s how you use the plugin:

jQuery("#validHTML").w3cValidator({
	parserLocation: "path/to/w3cValidator.php",
	URL_isValid: '<a class="standardLink" href="http://validator.w3.org/check?uri=referer">valid HTML</a>', /* optional */
	URL_isInvalid: '' /* optional */
});

And here’s a demo (take a look at your Firebug console):
This Blog has:
 
Normally you wouldn’t tell your visitors that the current site has some errors
To see a site that validates you can go to the this project of mine and take a look at the footer (and here a specific page from the same project that doesn’t validate).
 
Well, I think the plugin is pretty self-explanatory, so I won’t write a novel about it. If you think you could use it somewhere, just download the two plugin files, upload them to your server, insert the javascript file into you markup

<script style="text/javascript" src="path/to/jquery.w3cValidator.js"></script>

call the plugin

jQuery("#validHTML").w3cValidator({
	parserLocation: "path/to/w3cValidator.php",
	URL_isValid: '<a class="standardLink" href="http://validator.w3.org/check?uri=referer">valid HTML</a>', /* optional */
	URL_isInvalid: '' /* optional */
});

and you’re done! (But don’t forget that it is a Plugin and you’ll need jQuery to use it.)

If you want change the output just stick with “URL_isValid” and “URL_isInvalid” which are allowed to contain any HTML.
 
 
 
Changelog:
13/Aug/2008 - Minor change to the PHP file. added urlencode();