{"id":2105,"date":"2011-12-06T13:47:00","date_gmt":"2011-12-06T19:47:00","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=2105"},"modified":"2012-01-16T10:47:31","modified_gmt":"2012-01-16T16:47:31","slug":"html5-validator-plugin","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2011\/12\/06\/html5-validator-plugin\/","title":{"rendered":"HTML5 validator plugin"},"content":{"rendered":"<script type=\"text\/javascript\" src=\"\/inc\/jquery.validateHTML5.js\"><\/script>\r\n<h3>tl;dr<\/h3>\r\n<p><a href=\"\/inc\/jquery.validateHTML5.js\">Download the code<\/a>. Use <code class=\"language-javascript\">$.validateHTML5(callback)<\/code>, where <code class=\"language-javascript\">callback (result, data)<\/code> is a function that is called with the <code>result<\/code>, a string that can be <code class=\"language-javascript\">\"valid\"<\/code> if the page validated, <code class=\"language-javascript\">\"invalid\"<\/code> if it did not, <code class=\"language-javascript\">\"warning\"<\/code> if it validated but is \"in some way questionable\", or <code class=\"language-javascript\">\"not validated\"<\/code> if some error occurred. <code>data<\/code> is the actual <a href=\"http:\/\/wiki.whatwg.org\/wiki\/Validator.nu_JSON_Output\"><code>JSON<\/code> output<\/a> from the validator.<\/p>\r\n<!--more-->\r\n<h3>Discussion<\/h3>\r\n<p>Lots of sites have links like <code class=\"language-html\">&lt;a href=\"http:\/\/validator.w3.org\/check\/referer\"&gt;Valid HTML&lt;\/a&gt;<\/code>, which <em>claims<\/em> that the site is valid and allows you to click the link and check it, but it would be nice to have some way of actually validating the page that is being shown. Nice for me as the author, at least. I'm not sure anyone else cares.<\/p>\r\n<p>Luckily, I've been doing everything recently in <a href=\"http:\/\/html5.org\/\">HTML5<\/a>, and <a href=\"http:\/\/html5.validator.nu\/\">Validator.nu<\/a> has a <a href=\"http:\/\/wiki.whatwg.org\/wiki\/Validator.nu_JSON_Output\">web service API with JSON output<\/a> that we can use programmatically. We don't want to do this on the server side, since that takes time that our users don't need to waste. Also (I did this when playing around with it) you can end up in an infinite loop, where my server GETs the validator output, which GETs the page from the server, which GETs the validator output, which GETs the page from the server, <i>ad infinitum<\/i>.<\/p>\r\n<p>So we want to send the page without validating it and then use <a href=\"http:\/\/en.wikipedia.org\/wiki\/Ajax_(programming)\">AJAX<\/a> to validate it. Fortunately, the validator allows <a href=\"http:\/\/en.wikipedia.org\/wiki\/JSONP\">JSONP<\/a>, so we don't have to worry about same-origin security. Unfortunately, the <a href=\"http:\/\/wiki.whatwg.org\/wiki\/Validator.nu_JSON_Output\">documentation wiki<\/a> is wrong about exactly what is returned, so it took some experimentation to get it to work.<\/p>\r\n<p><a href=\"\/blog\/blogfiles\/validatortest.php\">See the example<\/a>.<\/p>\r\n<p>The <a href=\"http:\/\/validator.w3.org\/\">W3C validator<\/a> has a validator and does have a <a href=\"http:\/\/validator.w3.org\/docs\/api.html\">web service<\/a>, but the only documented output format is SOAP. <code>output=json<\/code> works to produce JSON, but I can't find a way to get JSONP.<\/p>\r\n","protected":false},"excerpt":{"rendered":"tl;dr Download the code. Use $.validateHTML5(callback), where callback (result, data) is a function that is called with the result, a string that can be \"valid\" if the page validated, \"invalid\" if it did not, \"warning\" if it validated but is \"in some way questionable\", or \"not validated\" if some error occurred. data is the actual [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2105"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2105"}],"version-history":[{"count":46,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2105\/revisions"}],"predecessor-version":[{"id":2217,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2105\/revisions\/2217"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}