Slowparse Error Reporting Specification

All of the following documentation is generated on-the-fly, in your browser, by slowparse.js and errors.jquery.js. If something looks amiss, run the actual output against the expected results at the test sute; if errors are reported, please feel free to file a bug.

You can also consult the live demo to see this error reporting used in an interactive widget.

HTML Errors

UNEXPECTED_CLOSE_TAG

Example

hi</i>

The closing </i> tag here doesn't pair with anything, because there are no opening tags that need to be closed.

JavaScript Code

Slowparse.findError("hi</i>");
{
  "type": "UNEXPECTED_CLOSE_TAG",
  "closeTag": {
    "name": "i",
    "start": 2,
    "end": 5
  }
}

MISMATCHED_CLOSE_TAG

Example

<p>hi</i>

The closing </i> tag here doesn't pair with the opening <p> tag here.

JavaScript Code

Slowparse.findError("<p>hi</i>");
{
  "type": "MISMATCHED_CLOSE_TAG",
  "openTag": {
    "name": "p",
    "start": 0,
    "end": 3
  },
  "closeTag": {
    "name": "i",
    "start": 5,
    "end": 8
  }
}

CLOSE_TAG_FOR_VOID_ELEMENT

Example

<br>hello</br>

The closing </br> tag here is for a void element (that is, an element that doesn't need to be closed).

JavaScript Code

Slowparse.findError("<br>hello</br>");
{
  "type": "CLOSE_TAG_FOR_VOID_ELEMENT",
  "closeTag": {
    "name": "br",
    "start": 9,
    "end": 13
  }
}

SELF_CLOSING_NON_VOID_ELEMENT

Example

hello<p/>there

The <p> tag here can't be self-closed, because <p> is not a void element; it must be closed with a separate </p> tag.

JavaScript Code

Slowparse.findError("hello<p/>there");
{
  "type": "SELF_CLOSING_NON_VOID_ELEMENT",
  "name": "p",
  "start": 5,
  "end": 9
}

UNCLOSED_TAG

Example

hello <em>there

The <em> tag here never closes.

JavaScript Code

Slowparse.findError("hello <em>there");
{
  "type": "UNCLOSED_TAG",
  "openTag": {
    "name": "em",
    "start": 6,
    "end": 10
  }
}

INVALID_TAG_NAME

Example

<-lol>

The < character here appears to be the beginning of a tag, but is not followed by a valid tag name.

If you just want a < to appear on your Web page, try using &lt; instead.

Or, see a list of HTML5 tags.

JavaScript Code

Slowparse.findError("<-lol>");
{
  "type": "INVALID_TAG_NAME",
  "openTag": {
    "name": "",
    "start": 0,
    "end": 1
  }
}

UNTERMINATED_CLOSE_TAG

Example

hello <em>there</em dude.

The closing </em> tag here doesn't end with a >.

JavaScript Code

Slowparse.findError("hello <em>there</em dude.");
{
  "type": "UNTERMINATED_CLOSE_TAG",
  "closeTag": {
    "name": "em",
    "start": 15,
    "end": 19
  }
}

UNQUOTED_ATTR_VALUE

Example

<a class=foo bar>

The Attribute value here should start with an opening double quote.

JavaScript Code

Slowparse.findError("<a class=foo bar>");
{
  "type": "UNQUOTED_ATTR_VALUE",
  "start": 9
}

Notes

The HTML5 specification actually allows unquoted attribute values, so long as they don't have spaces in them. However, this isn't commonly done outside of minifying HTML. Furthermore, by complicating the standard, our predictions about the user's intent also become ambiguous, which results in more cryptic and confusing error messages. By choosing to enforce monotony, we ease the learning process and provide more helpful errors.

UNTERMINATED_OPEN_TAG

Example

hello <em </em>

The opening <em> tag here doesn't end with a >.

JavaScript Code

Slowparse.findError("hello <em </em>");
{
  "type": "UNTERMINATED_OPEN_TAG",
  "openTag": {
    "start": 6,
    "end": 10,
    "name": "em"
  }
}

UNTERMINATED_ATTR_VALUE

Example

hello <em class="foo>there</em>

The <em> tag's class attribute has a value here that doesn't end with a closing double quote.

JavaScript Code

Slowparse.findError("hello <em class=\"foo>there</em>");
{
  "type": "UNTERMINATED_ATTR_VALUE",
  "openTag": {
    "name": "em",
    "start": 6
  },
  "attribute": {
    "name": {
      "value": "class",
      "start": 10,
      "end": 15
    },
    "value": {
      "start": 16
    }
  }
}

UNTERMINATED_ATTR_VALUE

Example

hello <em class='foo>there</em>

The <em> tag's class attribute has a value here that doesn't end with a closing double quote.

JavaScript Code

Slowparse.findError("hello <em class='foo>there</em>");
{
  "type": "UNTERMINATED_ATTR_VALUE",
  "openTag": {
    "name": "em",
    "start": 6
  },
  "attribute": {
    "name": {
      "value": "class",
      "start": 10,
      "end": 15
    },
    "value": {
      "start": 16
    }
  }
}

UNTERMINATED_ATTR_VALUE

Example

hello <em class="foo'>there</em>

The <em> tag's class attribute has a value here that doesn't end with a closing double quote.

JavaScript Code

Slowparse.findError("hello <em class=\"foo'>there</em>");
{
  "type": "UNTERMINATED_ATTR_VALUE",
  "openTag": {
    "name": "em",
    "start": 6
  },
  "attribute": {
    "name": {
      "value": "class",
      "start": 10,
      "end": 15
    },
    "value": {
      "start": 16
    }
  }
}

UNTERMINATED_ATTR_VALUE

Example

hello <em class='foo">there</em>

The <em> tag's class attribute has a value here that doesn't end with a closing double quote.

JavaScript Code

Slowparse.findError("hello <em class='foo\">there</em>");
{
  "type": "UNTERMINATED_ATTR_VALUE",
  "openTag": {
    "name": "em",
    "start": 6
  },
  "attribute": {
    "name": {
      "value": "class",
      "start": 10,
      "end": 15
    },
    "value": {
      "start": 16
    }
  }
}

UNTERMINATED_COMMENT

Example

hi<!--blah

The comment here doesn't end with a -->.

JavaScript Code

Slowparse.findError("hi<!--blah");
{
  "type": "UNTERMINATED_COMMENT",
  "start": 2
}

CSS Errors

UNFINISHED_CSS_SELECTOR

Example

<style> a

Selector a still needs finalising with {

JavaScript Code

Slowparse.findError("<style> a");
{
  "type": "UNFINISHED_CSS_SELECTOR",
  "cssSelector": {
    "start": 8,
    "end": 9,
    "selector": "a"
  }
}

MISSING_CSS_PROPERTY

Example

<style> a {

Missing property for a.

JavaScript Code

Slowparse.findError("<style> a {");
{
  "type": "MISSING_CSS_PROPERTY",
  "cssSelector": {
    "start": 8,
    "end": 9,
    "selector": "a"
  }
}

UNFINISHED_CSS_PROPERTY

Example

<style> a { color

Property color still needs finalising with :

JavaScript Code

Slowparse.findError("<style> a { color");
{
  "type": "UNFINISHED_CSS_PROPERTY",
  "cssProperty": {
    "start": 12,
    "end": 17,
    "property": "color"
  }
}

MISSING_CSS_VALUE

Example

<style> a { color:

Missing value for color.

JavaScript Code

Slowparse.findError("<style> a { color:");
{
  "type": "MISSING_CSS_VALUE",
  "cssProperty": {
    "start": 12,
    "end": 17,
    "property": "color"
  }
}

INVALID_CSS_PROPERTY_NAME

Example

<style> a { colour:

CSS property colour does not exist. You may want to see a list of CSS properties.

JavaScript Code

Slowparse.findError("<style> a { colour:");
{
  "type": "INVALID_CSS_PROPERTY_NAME",
  "cssProperty": {
    "start": 12,
    "end": 18,
    "property": "colour"
  }
}

UNFINISHED_CSS_VALUE

Example

<style> a { color: red

Value red still needs finalising with ;

JavaScript Code

Slowparse.findError("<style> a { color: red");
{
  "type": "UNFINISHED_CSS_VALUE",
  "cssValue": {
    "start": 19,
    "end": 22,
    "value": "red"
  }
}

MISSING_CSS_BLOCK_CLOSER

Example

<style> a { color: red;

Missing block closer or next property:value; pair following red.

JavaScript Code

Slowparse.findError("<style> a { color: red;");
{
  "type": "MISSING_CSS_BLOCK_CLOSER",
  "cssValue": {
    "start": 19,
    "end": 22,
    "value": "red"
  }
}

MISSING_CSS_SELECTOR

Example

<style> a { color: red; }

Missing either a new CSS selector or the </style> tag here.

JavaScript Code

Slowparse.findError("<style> a { color: red; }");
{
  "type": "MISSING_CSS_SELECTOR",
  "cssBlock": {
    "start": 24,
    "end": 25
  }
}

MISSING_CSS_BLOCK_CLOSER

Example

<style> a { li {

Missing block closer or next property:value; pair following a.

JavaScript Code

Slowparse.findError("<style> a { li {");
{
  "type": "MISSING_CSS_BLOCK_CLOSER",
  "cssValue": {
    "start": 8,
    "end": 12,
    "value": "a"
  }
}

HTML_CODE_IN_CSS_BLOCK

Example

<style>
      <!-- html comment in CSS block -->
    </style>

HTML code was detected in CSS context starting here

JavaScript Code

Slowparse.findError("<style>\n <!-- html comment in CSS block -->\n </style>");
{
  "type": "HTML_CODE_IN_CSS_BLOCK",
  "html": {
    "start": 13,
    "end": 14
  }
}

HTML_CODE_IN_CSS_BLOCK

Example

<style>
      <p>html code in CSS block</p>
    </style>

HTML code was detected in CSS context starting here

JavaScript Code

Slowparse.findError("<style>\n <p>html code in CSS block</p>\n </style>");
{
  "type": "HTML_CODE_IN_CSS_BLOCK",
  "html": {
    "start": 13,
    "end": 14
  }
}

UNTERMINATED_CSS_COMMENT

Example

<style> /* unterminated comment

The CSS comment here doesn't end with a */.

JavaScript Code

Slowparse.findError("<style> /* unterminated comment");
{
  "type": "UNTERMINATED_CSS_COMMENT",
  "start": 8
}

FORBIDJS Errors

The tree-inspectors.js script must be included to enable these errors.

SCRIPT_ELEMENT_NOT_ALLOWED

Example

hi<script>alert('yo');</script>

Sorry, but security restrictions on this site prevent you from using <script> tags here. If you really need to use JavaScript, consider using jsbin or jsfiddle.

JavaScript Code

Slowparse.findError("hi<script>alert('yo');</script>", [TreeInspectors.forbidJS]);
{
  "openTag": {
    "start": 2,
    "end": 10
  },
  "closeTag": {
    "start": 22,
    "end": 31
  },
  "type": "SCRIPT_ELEMENT_NOT_ALLOWED"
}
Slowparse.findError({{HTML}}, [TreeInspectors.forbidJS]);

EVENT_HANDLER_ATTR_NOT_ALLOWED

Example

<p onclick="alert('yo');">hi</p>

Sorry, but security restrictions on this site prevent you from using the JavaScript event handler attribute here. If you really need to use JavaScript, consider using jsbin or jsfiddle.

JavaScript Code

Slowparse.findError("<p onclick=\"alert('yo');\">hi</p>", [TreeInspectors.forbidJS]);
{
  "name": {
    "start": 3,
    "end": 10
  },
  "value": {
    "start": 11,
    "end": 25
  },
  "type": "EVENT_HANDLER_ATTR_NOT_ALLOWED"
}
Slowparse.findError({{HTML}}, [TreeInspectors.forbidJS]);

JAVASCRIPT_URL_NOT_ALLOWED

Example

<a href="javascript:alert('yo');">hi</a>

Sorry, but security restrictions on this site prevent you from using the javascript: URL here. If you really need to use JavaScript, consider using jsbin or jsfiddle.

JavaScript Code

Slowparse.findError("<a href=\"javascript:alert('yo');\">hi</a>", [TreeInspectors.forbidJS]);
{
  "name": {
    "start": 3,
    "end": 7
  },
  "value": {
    "start": 8,
    "end": 33
  },
  "type": "JAVASCRIPT_URL_NOT_ALLOWED"
}
Slowparse.findError({{HTML}}, [TreeInspectors.forbidJS]);