Home » Html » W3C validation with AngularJS directives

W3C validation with AngularJS directives

Posted by: admin November 30, 2017 Leave a comment


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?


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

Directives can be applied to DOM elements with any of:

  1. <tag directive-name>
  2. <tag data-directive-name> (*)
  3. <tag x-directive-name>
  4. <tag directive_name>
  5. <tag x_directive_name>
  6. <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>
 <body data-ng-app="MyApp">


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

Screenshot of the validator