Geek Answers Handbook

Create / search html5 validator bookmarklet

I want to find or make a bookmarklet that will check the html content of the page being viewed using the W3C HTML 5 validator.

I found two bookmarklets, and I'm trying to make them behave like one and a bit like the other, however I'm not sure how to do this.

Chris Coyier has an HTML5 booklet validation that works well, except that it uses page URIs, so it doesn’t work for locally tested sites:

javascript:(function(){%20function%20fixFileUrl(u)%20{%20var%20windows,u;%20windows%20=%20(navigator.platform.indexOf("Win")%20!=%20-1);%20%20/*%20chop%20off%20file:///,%20unescape%20each%20%hh,%20convert%20/%20to%20\%20and%20|%20to%20:%20*/%20%20u%20=%20u.substr(windows%20?%208%20:%207);%20u%20=%20unescape(u);%20if(windows)%20{%20u%20=%20u.replace(/\//g,"\");%20u%20=%20u.replace(/\|/g,":");%20}%20return%20u;%20}%20/*%20bookmarklet%20body%20*/%20var%20loc,fileloc;%20loc%20=%20document.location.href;%20if%20(loc.length%20>%209%20&&%20loc.substr(0,8)=="file:///")%20{%20fileloc%20=%20fixFileUrl(loc);%20if%20(prompt("Copy%20filename%20to%20clipboard,%20press%20enter,%20paste%20into%20validator%20form",%20fileloc)%20!=%20null)%20{%20document.location.href%20=%20"http://validator.w3.org/file-upload.html"%20}%20}%20else%20document.location.href%20=%20"http://validator.w3.org/check?uri="%20+%20escape(document.location.href);%20void(0);%20})();

I also found this one that captures the html of the current page, but I can’t figure out how to make it html5 ... there is a link to doctype in the code, and I tried changing it to html5, html500, etc., and completely delete it, hoping it will automatically detect .. but to no avail:

 javascript:(function(){var h=document;var b=h.doctype;var e="<!DOCTYPE "+b.name.toLowerCase()+' PUBLIC "'+b.publicId+'" "'+b.systemId+'">\n';var g=h.documentElement.outerHTML;var f="http://validator.w3.org/check";var i={prefill_doctype:"html401",prefill:0,doctype:"inline",group:0,ss:1,st:1,outline:1,verbose:1,fragment:e+g};var a=h.createElement("form");a.setAttribute("method","post");a.setAttribute("target","_blank");a.setAttribute("action",f);for(var j in i){var c=h.createElement("input");c.setAttribute("type","hidden");c.setAttribute("name",j);c.setAttribute("value",i[j]);a.appendChild(c)}if(navigator.appCodeName=="Mozilla"){h.body.appendChild(a)}a.submit()})();
+4
source share
5 answers

First you need an exact copy of the HTML document (including Doctype, etc.). For this purpose, I wrote the following function:

 function DOMtoString(document_root) { var html = '', node = document_root.firstChild; while (node) { switch (node.nodeType) { case Node.ELEMENT_NODE: html += node.outerHTML; break; case Node.TEXT_NODE: html += node.nodeValue; break; case Node.CDATA_SECTION_NODE: html += '<![CDATA[' + node.nodeValue + ']]>'; break; case Node.COMMENT_NODE: html += '<!--' + node.nodeValue + '-->'; break; case Node.DOCUMENT_TYPE_NODE: // (X)HTML documents are identified by public identifiers html += "<!DOCTYPE " + node.name + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '') + (!node.publicId && node.systemId ? ' SYSTEM' : '') + (node.systemId ? ' "' + node.systemId + '"' : '') + '>\n'; break; } node = node.nextSibling; } return html; }

Then you need to create and submit the form. After checking the submission of the form at http://validator.w3.org/check, I created the following function that represents meaningful key-value pairs:

 javascript:(function() { var html_to_validate = DOMtoString(document); /* Paste the DOMtoString function here */ function append(key, value) { var input = document.createElement('textarea'); input.name = key; input.value = value; form.appendChild(input); } var form = document.createElement('form'); form.method = 'POST'; form.action = 'http://validator.w3.org/check'; form.enctype = 'multipart/form-data'; // Required for this validator form.target = '_blank'; // Open in new tab append('fragment', html_to_validate); // <-- Code to validate append('doctype', 'HTML5'); // Validate as HTML 5 append('group', '0'); document.body.appendChild(form); form.submit(); })();

Bookmarklet

Copy the previous two blocks to the Google compiler closure . Remember the javascript: prefix again.

 javascript:(function(){function c(a,b){var c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var e=function(a){for(var b="",a=a.firstChild;a;){switch(a.nodeType){case Node.ELEMENT_NODE:b+=a.outerHTML;break;case Node.TEXT_NODE:b+=a.nodeValue;break;case Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE "+a.name+(a.publicId?' PUBLIC "'+a.publicId+'"':"")+(!a.publicId&&a.systemId? " SYSTEM":"")+(a.systemId?' "'+a.systemId+'"':"")+">\n"}a=a.nextSibling}return b}(document),d=document.createElement("form");d.method="POST";d.action="http://validator.w3.org/check";d.enctype="multipart/form-data";d.target="_blank";c("fragment",e);c("doctype","HTML5");c("group","0");document.body.appendChild(d);d.submit()})();
+11
source

I also got "Sorry! This document cannot be checked. Error resolved it by adding" utf-8 "to the accept-charset form attributes.

In the function that creates the form element, add the following line: form.acceptCharset = "utf-8";

It worked for me.

+1
source

Martha's answer helped me. Here is the updated bookmarklet.

 javascript:(function(){function c(a,b){var c=document.createElement("textarea");c.name=a;c.value=b;d.appendChild(c)}var e=function(a){for(var b="",a=a.firstChild;a;){switch(a.nodeType){case Node.ELEMENT_NODE:b+=a.outerHTML;break;case Node.TEXT_NODE:b+=a.nodeValue;break;case Node.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;case Node.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;case Node.DOCUMENT_TYPE_NODE:b+="<!DOCTYPE "+a.name+(a.publicId?' PUBLIC "'+a.publicId+'"':"")+(!a.publicId&&a.systemId? " SYSTEM":"")+(a.systemId?' "'+a.systemId+'"':"")+">\n"}a=a.nextSibling}return b}(document),d=document.createElement("form");d.method="POST";d.action="http://validator.w3.org/check";d.enctype="multipart/form-data";d.target="_blank";d.acceptCharset="utf-8";c("fragment",e);c("doctype","HTML5");c("group","0");document.body.appendChild(d);d.submit()})();
+1
source

Previous answers did not work. I use the bookmarklet "Checking the serial DOM of the current page" at https://validator.w3.org/nu/about.html . This seems to work wonderfully by picking up dynamically generated HTML.

+1
source

Supporting W3C HTML Checker. As noted in an earlier comment, in https://validator.w3.org/nu/about.html#extras I put some bookmarklets that you can use to check the serialized DOM of the current HTML document in any open browser window. One of them returns the results in HTML format, and the other returns the results in JSON format.

(If people have other bookmarks that they would like to add to this page, please open the PR at https://github.com/validator/validator with a patch against the source of this page, which is located at https://github.com /validator/validator/blob/master/site/nu-about.html#L108 .

+1
source

More articles:


All Articles