Skip to content Skip to sidebar Skip to footer

Making/finding Html5 Validator Bookmarklet

I want to find or make a bookmarklet that will validate the html content of a currently viewed page using the W3C HTML 5 validator. I have found two bookmarklets and am trying to g

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"