How to validate HTML content with multiple variables put inside a string

Question

I've below code

issuesList.innerHTML += "<div class=\"well\">" +
        "<h6> Issue Id:" + id + "</h6" +
        "<p><span class=\"label label-info\">" + status + "</span></p>" +
        "<h3>" + desc + "</h3>" +
        "<p><span class=\"glyphicon glyphicon-time\">" + severity + "</span></p>" +
        "<p><span class=\"glyphicon glyphicon-user\">" + assignedTo + "</span></p>" +
        "<a href=\"#\"  onclick= \"setStatusClosed(\"" + id + "\")\"   class=\"btn btn-warning\">Close</a>" +
        "<a href=\"#\ onclick=\"deleteIssue( \"" + id + "\")\"  class=\"btn btn-danger\>Delete</a>" +
        "</div>";

I wish to validate if this is correct format of HTML as it contains many variable and it's hard to debug if something goes wrong.

Almost any string will be valid HTML, as the browser will close tags and display attributes as text if something gets broken. If you really want to check, you could put the string in a hidden div then query it for the presence of the elements/attributes that you expect to be there. — Bryn Lewis
– Bryn Lewis, Commented Aug 4, 2020 at 5:44

JALO - JusAnotherLivngOrganism · Accepted Answer · 2020-08-04 05:35:00Z

1

To make it one degree less complicated, you can use single quotes to wrap class or style declarations and double quotes to wrap the overall html (or vice versa).

In this piece of html, I observed issued at closing of </h6> and in the class declaration of last anchor tag.

issuesList.innerHTML += "<div class='well'>" +
        "<h6> Issue Id:" + id + "</h6>" +
        "<p><span class='label label-info'>" + status + "</span></p>" +
        "<h3>" + desc + "</h3>" +
        "<p><span class='glyphicon glyphicon-time'>" + severity + "</span></p>" +
        "<p><span class='glyphicon glyphicon-user'>" + assignedTo + "</span></p>" +
        "<a href='#'  onclick= 'setStatusClosed(\"" + id + "\")'   class='btn btn-warning'>Close</a>" +
        "<a href='#' onclick='deleteIssue( \"" + id + "\")'  class='btn btn-danger'>Delete</a>" +
        "</div>";

You may use following function to validate the html so created:

function validator(createdhtml) {
    var tempdiv = document.createElement('div');
    tempdiv.innerHTML = createdhtml;
    return tempdiv.innerHTML;
}

Further I recommend reading: check-if-html-snippet-is-valid

answered Aug 4, 2020 at 5:35

JALO - JusAnotherLivngOrganism

1,2881 gold badge15 silver badges30 bronze badges

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

2 Comments

vikramvi Over a year ago

Thanks for quick help, is there any online validator similar to CSS validators jigsaw.w3.org/css-validator/#validate_by_input, where I can check if HTML if proper or not ? In VS Code, if file type is .html; I can easily find problem but syntax like above it's really difficult

JALO - JusAnotherLivngOrganism Over a year ago

Most welcome. Not sure if following will help, but if you paste the content of string in these, you should be able to get the pain points: jsonformatter.org/html-validator freeformatter.com/html-validator.html

Collectives™ on Stack Overflow

How to validate HTML content with multiple variables put inside a string

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related