Check if HTML snippet is valid with JavaScript

by

Update: this answer is limited – please see the edit below.

Expanding on @kolink’s answer, I use:

var checkHTML = function(html) {
  var doc = document.createElement('div');
  doc.innerHTML = html;
  return ( doc.innerHTML === html );
}

I.e., we create a temporary div with the HTML. In order to do this, the browser will create a DOM tree based on the HTML string, which may involve closing tags etc.

Comparing the div’s HTML contents with the original HTML will tell us if the browser needed to change anything.

checkHTML('<a>hell<b>o</b>')

Returns false.

checkHTML('<a>hell<b>o</b></a>')

Returns true.

Edit: As @Quentin notes below, this is excessively strict for a variety of reasons: browsers will often fix omitted closing tags, even if closing tags are optional for that tag. Eg: 

<p>one para
<p>second para

…is considered valid (since Ps are allowed to omit closing tags) but checkHTML will return false. Browsers will also normalise tag cases, and alter white space. You should be aware of these limits when deciding to use this approach.

More Related Contents:

  1. This doesn’t seem right? Javascript isn’t working
  2. My form’s validate() is not working
  3. HTML5 form required attribute. Set custom validation message?
  4. How to get the raw value an field?
  5. How to validate inputs dynamically created using ng-repeat, ng-show (angular)
  6. How to set HTML5 required attribute in Javascript?
  7. Limit number of lines in textarea and Display line count using jQuery
  8. Javascript regular expression to validate URL
  9. How to get old Value with onchange() event in text box
  10. How to Call a JS function using OnClick event [duplicate]
  11. Enable/Disable submit button if checkbox is checked/unchecked?
  12. Best JavaScript solution for client-side form validation and interaction? [closed]
  13. HTML/JavaScript: Simple form validation on submit
  14. How to show setCustomValidity message/tooltip without submit event
  15. How to set custom validation messages for HTML forms?
  16. Trigger standard HTML validation (form) without using submit button? [duplicate]
  17. Angular form validation ng-disabled not working
  18. angularjs form reset error
  19. How to highlight a part part of an Input text field in HTML using Javascript or JQuery
  20. input:invalid css rule is applied on page load
  21. How can I void a form action and execute jQuery when all HTML form elements are validated?
  22. Check if a browser has built-in HTML form validation?
  23. How to detect if JavaScript is disabled?
  24. How to get an HTML element’s style values in javascript?
  25. Detect all changes to a (immediately) using JQuery
  26. Using HTML5/JavaScript to generate and save a file
  27. Disable form auto submit on button click
  28. jQuery: how to change tag name?
  29. Convert dropdown to selection boxes with color and trigger drop down action
  30. Jquery change text between two elements

Leave a Comment