W3C validation with AngularJS directives

html angularjs w3c w3c-validation

14,849

Strict w3c validation allows any data-* attributes, and any class.

Directives can be applied to DOM elements with any of:

<tag directive-name>
<tag data-directive-name> (*)
<tag x-directive-name>
<tag directive_name>
<tag x_directive_name>
<tag data_directive_name>

At least the data- one is fully W3C compliant (provided you declare HTML5 doctype). So the following code validates (the attribute name, of course it fails for missing title, missing encoding etc):

<!DOCTYPE html>
<html>
 <body data-ng-app="MyApp">
 </body>
</html>

14,849

Author by

AndyB

Updated on June 04, 2022

Comments

AndyB almost 2 years

How do we go about doing W3C validation with an Angular application?

Since custom directives make for invalid HTML validation, we typically see lots of W3C validation errors. Are there any strategies for this?
Josh Petitt almost 11 years

I think this is also mentioned in this excellent video: youtube.com/watch?v=WqmeI5fZcho
Jukka K. Korpela almost 11 years

The answer only applies to experimental validation according to HTML5, which is work in progress. HTML5 does not accept literally any data-* attribute (essentially, : is not allowed in the name), and x-* attributes are not valid (they cause validator error messages): “Attribute names beginning with the two characters "x-" are reserved for user agent use and are guaranteed to never be formally added to the HTML language.”
AndyB almost 11 years

Just to be clear, here is an example of failed w3c validation using the Tidy algorithm to validate some AngularJS code. How would x- or data- prefixes help with ng-* directives anyway? line 330 column 74 - Error: Attribute ng-app not allowed on element div at this point. line 330 column 74 - Error: Attribute ng-controller not allowed on element div at this point. line 354 column 125 - Error: Attribute ng-model not allowed on element input at this point. line 387 column 64 - Error: Attribute ng-repeat not allowed on element li at this point.
rewritten almost 11 years

Prepend the attributes with data- and declare it to be HTML5.
AndyB almost 11 years

Following up, data- prefix worked great with Tidy algorithm validator, and apparently works with custom directives too!
rewritten almost 11 years

it works with custom directives, it's a feature of the angular compiler! A directive can be declared in any of the above ways (say, use underscores if you write templates in HAML+new ruby hash syntax, use colons if you want to break everyone's brain...)
wbyoung over 10 years

@JukkaK.Korpela I may be misunderstanding, but couldn't angularjs be considered a vendor of sorts making the x-* prefix valid according to the spec?
Jukka K. Korpela over 10 years

@wbyoung, the Extensibility section in HTML5 CR says about x-* attributes: “Note: Pages that use such attributes are by definition non-conforming.”