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?
Asked
Active
Viewed 1.5k times
2 Answers
35
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>
rewritten
- 16,280
- 2
- 47
- 50
-
I think this is also mentioned in this excellent video: http://www.youtube.com/watch?v=WqmeI5fZcho – Josh Petitt Jun 06 '13 at 03:43
-
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.” – Jukka K. Korpela Jun 06 '13 at 04:09
-
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. – AndyB Jun 06 '13 at 11:11
-
3Prepend the attributes with `data-` and declare it to be HTML5. – rewritten Jun 06 '13 at 11:17
-
1Following up, data- prefix worked great with Tidy algorithm validator, and apparently works with custom directives too! – AndyB Jun 06 '13 at 18:57
-
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...) – rewritten Jun 06 '13 at 22:12
-
@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? – wbyoung Oct 16 '13 at 01:19
-
1@wbyoung, the [Extensibility](http://www.w3.org/TR/html5/infrastructure.html#extensibility) section in HTML5 CR says about `x-*` attributes: “**Note:** Pages that use such attributes are by definition non-conforming.” – Jukka K. Korpela Oct 16 '13 at 05:04
-1
W3 Validation of Angular code online
If you tried to validate your AngularJS code with http://validator.w3.org/, you must have noticed that it does not allow AngularJS ng-* attributes.
One way to validate (as @rewritten explained), is to prefix your ng-* with data-, or x-.
I do not want to do this on the 800 attributes of my app. In my point of view, it reduces the clarity of the code, especially when we use a lot of these attributes.
The W3C HTML5 validation team has developed a tool which allow to filter errors during the validation, and accept well ng-* attributes.
You can try it at this URL: http://validator.w3.org/nu/
After you submit a document for checking, on the results page you’ll see a Message filtering button, and if you press that, you’ll get a list of all the error messages grouped into sets, with Show/Hide checkboxes.
