Most frontend developers nowadays automatically validate their JavaScript and CSS, but it's easy to forget to validate the HTML.

Many of us use a task runner to keep our JavaScript lint-free using JSLint or JSHint (some people probably even started using ESLint). Many of us automatically validate our LESS, SASS, Stylus or CSS. But can you say that you are automatically validating your HTML?

At the last CopenhagenJS, the main talk of the evening was "Grunt vs. Gulp - a JavaScript Task runner showdown" by Vanja Ćosić. More than half of the audience had experience with Grunt, and perhaps 10% had experience with Gulp. 40 people is a very small sample but it proves that most of us started automating some of the tasks in our everyday workflow.

W3C validator

Validator S.A.C., a native Mac application around W3C's validator

I love the W3C validator. To me, this is the best validator, but if you know of any other good validators, please let me know. What bothered me though, was the fact that I always had to visit the website to check my page. Was there a way to check it using Grunt or Gulp?

grunt-html-validation

The grunt-html-validation takes you a long way. You can set up the grunt task to run after your filesystem watcher, to automatically check every time you save any HTML file in your project. However, with several files and iterations, you are going to end up "spamming" the server. They will block you after a few requests! To me it happened after a thousand or a little more requests. The unblocking happens after an hour or so. But don't worry, there's a simple solution to this problem!

Install W3C validator locally

Installing the W3C validator will not only let you do as many validations as your heart desires, it could also be slightly faster because you eliminate the roundtrip over the Internet to the W3C server and back. The process of installation used to require sorting out dependencies and building the source code, but is now a piece of cake using one of the pre-made builds. For Mac, there's a standalone application called Validator S.A.C.

Direct link to download it here or the check web page for most recent version. Run the installer and you're done!

Running a web service

This step is intended for the Mac application Validator S.A.C. It could look different for the other platforms, however I haven't tried them yet.

Install the configuration file and restart Apache:

cd /Applications/Validator-SAC.app/Contents/Resources
% sudo cp validator/httpd/conf/validator-SAC.conf /etc/apache2/other
% sudo apachectl graceful

You might get an error during the installation, like I did (on OS X 10.9). For some reason, the last line in the validator-SAC.conf caused the error. You can just put a # at the start of the whole line to disable it - it's not needed. What it's supposed to do is to register as a Bonjour service. This way "anyone on your local network can access the service from a Bonjour enabled browser (for example, Safari's Bonjour bookmark menu)." (quote from the website).

Configure your plugin to use localhost

For grunt-html-validate, just set options.serverUrl to "http://localhost/w3c-validator/check". Now you're all set!

Now spend the rest of your day checking and fixing all the problems that have snuck in to your HTML! The better part are probably completely harmless, but dare I bet you have a bigger number of warnings than you think? :))