CODEWITHSUNDEEP
htmlangularjsw3cw3c-validation
AndyB
AndyB

Reputation: 426

W3C validation with AngularJS directives

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?

Upvotes: 31

Views: 15129

Answers (2)

Mistalis
Mistalis

Reputation: 18279

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.

Screenshot of the validator

Source

Upvotes: -1

rewritten
rewritten

Reputation: 16435

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>
<html>
 <body data-ng-app="MyApp">
 </body>
</html>

Upvotes: 35

Related Questions