Making/finding Html5 Validator Bookmarklet
Solution 1:
First, you need an exact copy of the HTML document (including Doctype etc). For this purpose, I have written the following function:
functionDOMtoString(document_root) {
var html = '',
node = document_root.firstChild;
while (node) {
switch (node.nodeType) {
caseNode.ELEMENT_NODE:
html += node.outerHTML;
break;
caseNode.TEXT_NODE:
html += node.nodeValue;
break;
caseNode.CDATA_SECTION_NODE:
html += '<![CDATA[' + node.nodeValue + ']]>';
break;
caseNode.COMMENT_NODE:
html += '<!--' + node.nodeValue + '-->';
break;
caseNode.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, a form has to be created and submitted. After inspecting the form submission to http://validator.w3.org/check, I've created the following function, which submits the significant key-value pairs:
javascript:(function() {
var html_to_validate = DOMtoString(document);
/* Paste the DOMtoString function here */functionappend(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 tabappend('fragment', html_to_validate); // <-- Code to validateappend('doctype', 'HTML5'); // Validate as HTML 5append('group', '0');
document.body.appendChild(form);
form.submit();
})();
Bookmarklet
Copy the previous two blocks to Google's closure compiler. Do not forget to prefix javascript:
again.
javascript:(function(){functionc(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){caseNode.ELEMENT_NODE:b+=a.outerHTML;break;caseNode.TEXT_NODE:b+=a.nodeValue;break;caseNode.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;caseNode.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;caseNode.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()})();
Solution 2:
I was also getting the 'Sorry! This document cannot be checked.' error, resolved it by adding an accept-charset "utf-8" to the form attributes.
In the function that creates the form element add the following line: form.acceptCharset = "utf-8";
It worked for me.
Solution 3:
Marta's answer helped me out. Here is the updated bookmarklet.
javascript:(function(){functionc(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){caseNode.ELEMENT_NODE:b+=a.outerHTML;break;caseNode.TEXT_NODE:b+=a.nodeValue;break;caseNode.CDATA_SECTION_NODE:b+="<![CDATA["+a.nodeValue+"]]\>";break;caseNode.COMMENT_NODE:b+="<\!--"+a.nodeValue+"--\>";break;caseNode.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()})();
Solution 4:
The previous answers didn't work form me. I'm using the "Check serialized DOM of Current Page" bookmarklet at https://validator.w3.org/nu/about.html. This seems to work wonderfully, picking up dynamically generated HTML.
Post a Comment for "Making/finding Html5 Validator Bookmarklet"