W3C Validation and Vue's HTML binding syntax

Question

When I validate my page with the W3C validator, I get this error with Vue's event and binding syntax:

Error: Attribute v-on:click not allowed on element div at this point.

Is there a way to fix this?

Rumanian

Answer 1

They would ideally support the use of data-* attributes, e.g., data-v-on:click, but it seems they don’t.

See their issue Why not using HTML5 data-* attributes.

It seems that it was possible to overwrite the used prefix, but this option seems to have been removed.

Regressive

Thanks for the link. According to the author "Vue directives are removed in the rendered markup, so your eventual markup will be W3C compliant." Now I have to figure out why it's actually rendered when I validate the document. – Rumanian

@PierreB: The W3C validator (and many other consumers) don’t execute JavaScript. – Regressive

I used Chrome's "Validate" plugin and also used the W3C online validator by copy/pasting the browser's html source. The page is also rendered in an ASP.net MVC with the razor templating engine in wich I include Vue.js code. I wonder if there's a clue here... – Rumanian

my understanding is that the directive syntax is not supposed to be in the rendered markup. So copy/pasting a rendered code source in W3C's validator should'nt make any difference right ? I also validated successfully many rendered code with a bunch of jquery code. So there must be something I'm not doing right before I compile. – Rumanian

Ok, I figured it out. I copy/pasted in the W3C validator the rendered HTML comming from Chrome's inspector instead of the browser's source. – Rumanian

@Rumanian This won't show you unclosed elements... and a browser often fix code errors... – Succulent

Answer 2

You can create a specific regular expression for ignoring errors caused through vue.js usage:

Attribute "((v-|:)[^"]+|@click)" not allowed

This regex can be used in different ways depending on how exactly you are validating your project. For example if you are using the CLI version of vnu.jar you can put it into a file and use the --filterfile LIST_OF_REGEXES.txt option. Or if you are setting up your own vnu.jar server then you can use -Dnu.validator.servlet.filterfile=LIST_OF_REGEXES.txt.

(Sadly, some wrappers such as html-validator/html-validator-cli for node and gulp-html apparently only support ignore strings and not regular expressions. Others such as grunt-html and html5validator so support it though.)

BTW, the style of the quotes changed, in older versions it would use unicode smart quotation marks per default and the regular expression needs to be adapted to that.

Mulligrubs