logo

Be Careful With Custom HTML Attributes (Dojo)

If you've used Dojo and the Dijit library to add field validation to HTML forms then you may have ended up with something like this:

<input required="false" name="Email" 
	invalidMessage="Enter your email address" 
	dojoType="dijit.form.ValidationTextBox" />

All very well. Things work. Until, that is, browsers start to implement the new HTML5 "required" attribute added to the input element.

I found this out this week while supporting a site I've inherited from another developer who created it many moons ago. Long before even HTML4 was being ratified. The site still works but not in IE10.

In the case of the above field IE10 insists, correctly, that a value be entered. As far as the HTML5-supporting IE10 is concerned, it is a required field. Even if the value of the attribute says false.

This is because the required attribute is a "boolean attribute". Meaning that, if the attribute is there at all, it's considered "on" or "true". Specifying a value of "false" has no effect. To turn if off you have to remove the attribute.

So, the fix is simple. For non-required input elements just miss the required attribute off, like so:

<input name="Email" invalidMessage="Enter your email address"
dojoType="dijit.form.ValidationTextBox" />

This way, both IE10 and Dojo's validation routines are happy to co-exist.

Bear in mind though that, from now on, the correct way to add custom attributes to any HTML element is to do so with the "data-" prefix. So the above field could be:

<input data-required="false" name="Email" 
    data-invalidMessage="Enter your email address" 
    data-dojoType="dijit.form.ValidationTextBox" />

Although, obviously, that won't work with existing versions of Dojo unless you alter the source code. But, if you're adding your own attributes to your own HTML then use "data-". If not, and you insist on making your own attributes without the data- prefix, just make sure you don't use a word that won't, one day, become a bona-fide attribute.

Comments

    • avatar
    • Erik Brooks
    • Mon 10 Dec 2012 03:12 PM

    The "data-" attributes are supported in newer versions of Dojo (1.6.x and beyond, I believe.)

    It sounds like there's no DOCTYPE specified on the page. Have you looked at that? If you specify an HTML4 DOCTYPE (probably transitional) then IE should avoid honoring the "required" attribute. If course, with IE "should" often means "no way will this actually happen..."

      • avatar
      • Jake Howlett
      • Mon 10 Dec 2012 03:19 PM

      Yep, the doctype is transitional ("loose"). Changing it is completely out of the question. The system is so ridiculously over-complicated and temperamental you wouldn't believe. You only have to look at it the wrong way and it breaks.

      Show the rest of this thread

    • avatar
    • axel
    • Wed 12 Dec 2012 07:49 AM

    Dojo is quite big, so really wasn't there a way to take influence on the html5 standard committee for example via IBM?

    I deleted the 5 pseudo-rational, emotional 'jquery way smarter than dojo' polemics, that came to my mind.

    Could be my lack of smartness, but there are frameworks out there, that from its nature leads to hard to maintain solutions.

    Offtopic: having to maintain my customers proud jbehave usage nearly made me cry 3 times the last 48 hours. Aligators from the same swamp.

  1. Thanks, Jake. Used this tip just today with an XSLT xsl:attribute where my xml data will be used to dynamically add attributes to divs created by the transform.

    Good info!

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Mon 10 Dec 2012

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

More Content