How to validate angular HTML templates

Question

I try to write mostly valid polyglot (X)HTML 5 in my angular HTML templates. They look something like this:

<div class="some-class">
  <input type="checkbox" data-ng-model="variable" />
  <foo-directive data-ng-if="variable"></foo-directive>
</div>

Sometimes I forget closing a tag properly which breaks some browsers. So I would like to include a validator in my toolchain.

The problem is: I do not know of a validator that can handle this case. XML validators typically require a DTD, HTML validators will complain about the angular directives that are used in the code.

Maybe validator is the wrong word and I really want a linter. The only real thing I want it to do is to check that every opening tag has a matching closing tag. Everything else is a bonus.

Do you know of such a validator?

NOTE: I primarily do search for a command line tool that I can integrate with my automated testing. But a webservice might be helpful, too.

I am using [htmlhint](http://htmlhint.com/) (through [Grunt](https://github.com/yaniswang/grunt-htmlhint) - but it makes no difference, there is also a CLI). I only use the `tag-pair` (ensure that tags are closed) and `attr-no-duplication` options. — Nikos Paraskevopoulos, Jan 26 '15 at 12:45
Works great! I would except that as an answer if you create it. — tobib, Jan 26 '15 at 13:05
related: [Polyglot-Markup validator](http://stackoverflow.com/q/16281471/588079) and [Validator for polyglot HTML5](http://softwarerecs.stackexchange.com/questions/17108/validator-for-polyglot-html5) — GitaarLAB, Feb 25 '16 at 16:07

score 12 · Accepted Answer · answered Jan 26 '15 at 13:18

12

Since htmlhint is an option, you can use it as described here from command line (of course you will have to npm install it first and make sure your PATH contains node_modules/.bin):

htmlhint test.html

To test for specific options:

htmlhint -r tag-pair,attr-no-duplication test.html

Or if the options are in a configuration file:

htmlhint -c config-file test.html

I use the following options with Angular:

tag-pair: make sure tags are closed properly
attr-no-duplication: no duplicate attributes in an element

answered Jan 26 '15 at 13:18

Nikos Paraskevopoulos

39,514
12
85
90

how do you make `htmllint` ignore custom directives and attributes? – jrharshath May 24 '16 at 16:42
It doesn't care about custom attributes/elements, at least in the online validator on their [front page](http://htmlhint.com/). – Nikos Paraskevopoulos May 24 '16 at 18:37
true, I noticed the same thing later – jrharshath May 25 '16 at 00:25
If you use atom you can add the package `linter-htmlhint`: https://atom.io/packages/linter-htmlhint – David Oct 27 '16 at 07:16

Chris Barr · Answer 2 · 2021-06-13T18:58:01.783

The html-angular-validate project is what I use, and I think it's perfect for this. It uses the W3C HTML validation service, and it basically just ignores errors about know angular stuff (like properties that begin with ng-* that are normally invalid HTML)

I run it via gulp using gulp-html-angular-validate

You will have to configure it to know about your custom element and attribute directives, which can become a bit of a pain if you are always adding new ones... however once you've done this it works quite well and has saved my team many times by finding simple typos and common errors!

How to validate angular HTML templates

2 Answers2