Dojo: declarative widgets and XHTML validation

January 02, 2012

Tested with: Dojo Toolkit 1.7.1

The problem

Suppose that we have a page in which we have used a dijit widget exploiting the declarative way and we have to validate the page against a XHTML DTD.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dojo W3C Validation</title> <link rel="stylesheet" type="text/css" href="dojo/dijit/themes/claro/claro.css" /> </head> <body class="claro"> <div> <button data-dojo-type="dijit.form.Button">Click me!</button> </div> <script type="text/javascript"> //<![CDATA[ var dojoConfig = { parseOnLoad: true }; //]]> </script> <script type="text/javascript" src="dojo/dojo.js"></script> <script type="text/javascript"> //<![CDATA[ dojo.require("dijit.form.Button"); //]]> </script> </body> </html>

This code is wrong for the W3C Validator because of the data-dojo-type attribute (that is valid in HTML5).

A solution

In order to pass the validation we can use an elegant tricks. For instance, we can replace the data-dojo-type attribute with

<button class="foo">Click me!</button>

and instead of dojo.require("dijit.form.Button") we have to write

dojo.addOnLoad(function() { dojo.require("dijit.form.Button"); dojo.addOnLoad(function() { dojo.query(".foo").instantiate(dijit.form.Button, { delay: 50 }); }); });


  1. Debunking Dojo Toolkit Myths

  2. (Stack Overflow) Dojo - XHTML validation?

  3. dojo.addOnLoad

Did you find this post useful? What about Buy Me A Coffee

A photo of Elia Contini
Written by
Elia Contini
Sardinian UX engineer and a Front-end web architect based in Switzerland. Marathoner, traveller, wannabe nature photographer.