Validate dynamic HTML generated by JavaScript

Question

How can I check that content generated by JavaScript is valid HTML? For example, the following document will pass static HTML validation (e.g. validator.nu), will not produce any JavaScript errors, and will render without complaint in a browser:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>test</title>
        <script>
            window.onload = function() {
                var text = document.createTextNode('nested anchor');
                var anchor = document.createElement('a');
                var nested_anchor = document.createElement('a');
                nested_anchor.appendChild(text);
                anchor.appendChild(nested_anchor);
                document.getElementsByTagName('body')[0].appendChild(anchor);
            };
        </script>
    </head>
    <body>
        <p>test</p>
    </body>
</html>

However, the output contains an anchor inside another anchor element, which is not valid according to the HTML5 specification. Is there any way to check for these sorts of errors?

possible duplicate of Making/finding html5 validator bookmarklet — cmeeren
– cmeeren, Commented Jul 17, 2015 at 17:02

solendil · Accepted Answer · 2011-10-13 09:44:57Z

3

You could output the resulting HTML as a String, embed it in a valid document and send it for validation. In your case, using jQuery var htmlText = $(anchor).html().

Or even simpler, output the whole resulting html console.log($("html").html())

edited Oct 13, 2011 at 9:44

answered Oct 13, 2011 at 9:39

solendil

8,4684 gold badges30 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user993096 Over a year ago

Thanks. I was hoping for something a bit more "one click", but that really helps. I always forget about console.log()!

Rob W · Accepted Answer · 2011-10-13 09:54:07Z

2

A possibility is to use the Validate Local HTML feature of the Web Developer toolbar (Chrome & Firefox). This feature will use the W3 validator to validate the generated HTML.

Instead of downloading an extension, you can also use my JavaScript bookmarklet to validate the local HTML. Create a bookmark, and paste the code below at the "URL" field. Then, whenever you want to validate the local HTML, click at the bookmarklet.
The code below is stand-alone, and doesn't require any framework.

javascript:void(function(){
    var form = document.createElement("form");
    form.method = "POST";
    form.enctype = "multipart/form-data";
    form.action = "http://validator.w3.org/check";
    form.target = "_blank";

    /* Get local HTML*/
    var html = "<html>" + document.documentElement.innerHTML + "</html>";
    var post_data = {
        fragment: html,/*Settings for validator*/
        prefill: "0",
        doctype: "HTML5",
        prefill_doctype: "html401",
        group: "0",
        ss: "1",
        outline: "1"
    };
    for(var name in post_data){
        (function(){
            var t = document.createElement("textarea");
            t.name = name;
            t.value = post_data[name];
            form.appendChild(t)
        })()
    }
    document.body.appendChild(form);
    form.submit(); /* Open validator, in new tab*/
    document.body.removeChild(form);
})()

answered Oct 13, 2011 at 9:54

Rob W

350k87 gold badges811 silver badges683 bronze badges

2 Comments

Rob W Over a year ago

@SalmanPK I've created an improved version, which also includes the page's doctype and other root elements. See this answer: Making/finding html5 validator bookmarklet.

Celmaun Over a year ago

Awesome. Thank you again! :) Working on a SPA and none of those chrome extensions work with dynamically generated markup :/. BTW that version is missing a document.body.removeChild(form) call I guess.

user2323922 · Accepted Answer · 2013-06-17 13:17:24Z

1

"Just save the html source after it has fully loaded and use that static file for validation."

I would presume if this worked that the browser would fix many issues when it takes a snap shot of the HTML from the DOM.

answered Jun 17, 2013 at 13:17

user2323922

951 silver badge3 bronze badges

Comments

frisco · Accepted Answer · 2011-10-13 09:51:07Z

0

Just save the html source after it has fully loaded and use that static file for validation.

answered Oct 13, 2011 at 9:51

frisco

1,9172 gold badges21 silver badges29 bronze badges

Collectives™ on Stack Overflow

Validate dynamic HTML generated by JavaScript

4 Answers 4

1 Comment

2 Comments

"Just save the html source after it has fully loaded and use that static file for validation."

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

"Just save the html source after it has fully loaded and use that static file for validation."

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related