32

I want to use a custom boolean attribute to mark an element's contents as editable. I'm aware of the data-* attributes, but wasn't sure if they require a value. I don't need data-is_editable="false", as the lack of the attribute would be equivalent. I only care if it's "true" (if the attribute exists). I know I can use other attributes like class but I don't want to as it seems slightly inappropriate (correct me if I'm wrong about that).

Here's the resource I'm reading, maybe it's the wrong document or I've overlooked the information I'm looking for: http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute

So for example, is this legal and valid?

<div data-editable data-draggable> My content </div>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Wesley Murch
  • 101,186
  • 37
  • 194
  • 228

2 Answers2

26

The example you show is valid. (Just like using disabled or checked in a form. Only xHTML force the presence of a value)

Although, the value returned is not a boolean. When you query this resource, you'll get an empty string for any empty data-* attributes.

Like so:

 domNode.dataset.draggable; // log ""
 domNode.dataset.notAdded; // log null

So, you just have to check it:

var isDraggable = (domNode.dataset.draggable != null)

Edit

Stupid to haven't tell it before. But, you can just check if the attribute exist if you want a boolean:

domNode.hasAttribute("data-draggable");
Simon Boudrias
  • 42,953
  • 16
  • 99
  • 134
  • 1
    Thanks for the insight. Only thing is, `domNode.dataset.draggable != null` returns true when the attribute doesn't exist. Seems better (although awkward) to check if it equals an empty string. Right? – Wesley Murch May 31 '13 at 20:24
  • Which browser are you checking? If the attribute don't exist on the lement, the code higher will return false. I putted type cohersion check `==` because this will match both `null` and `undefined`. It should return `null`, but I preferred to check for both just in case. – Simon Boudrias May 31 '13 at 20:27
  • 1
    Oh now wait, dude you're right. Sometimes my mind is easily flustered by boolean logic like `isTrue = isFalse !== true`. – Wesley Murch May 31 '13 at 20:30
  • Hey, just edited with `hasAttribute` which is the logical method to use if you want to get a boolean. – Simon Boudrias May 31 '13 at 20:30
  • Yeah `hasAttribute` is the way. Thanks a ton. – Wesley Murch May 31 '13 at 20:31
  • Is this future-proof? I know that attributes and properties are kind of interchangeable most of the time, and browsers and libraries seem pretty forgiving, but they are different things (jQuery made a big deal out of this awhile back). Is it safe to assume that applying a data value will always add the appropriate attribute? I would think so, but it might be worth looking into to make sure this doesn't bite back in a few years. – Joe Enos May 31 '13 at 20:48
  • 1
    Actually it is `undefined`, not `null`, so it's better to make check as `domNode.dataset.draggable !== undefined` – user May 19 '14 at 03:00
7

It passes the W3.org validator, which is a good sign.

Javascript's dataset and jQuery's data functions seem to know the difference between the attribute there or missing - but the value is an empty string when it's there, and either undefined or null when it's not. To avoid confusion, I don't think I'd use that personally - I'd probably instead opt for <div data-editable="1"></div> instead.

Joe Enos
  • 39,478
  • 11
  • 80
  • 136
  • The problem with that is the same as the problem with - it's a misnomer that implies you could do 'disabled="false"'. I'd say as long as an empty string evaluates to true in Javascript, it's fine to use. – Katana314 May 31 '13 at 20:24
  • Wow I didn't even realize there was W3C HTML5 validation... Seems legit then, but it doesn't treat the attributes as boolean (which is fine, and makes sense). – Wesley Murch May 31 '13 at 20:27
  • @Katana314 Agreed specifically on "disabled" - that's a weird one. However, javascript treats the empty string as a "falsy" value, so I'd be careful with that one. Simon's answer of `hasAttribute` seems to be the better way though, and eliminates this confusion. – Joe Enos May 31 '13 at 20:43
  • Funny thing is, I ended up realizing a potential use for the value: `
    `
     – Wesley Murch May 31 '13 at 20:46
  • @Katana314: `data-*` attributes are custom values, not part of HTML tags (such as `input`), so, personally, I don't see they should have to follow the same semantics. I'd argue the opposite, explicitly setting `true` and `false` and handling them explicitly (in `data-*`) attributes is much clearer than having to remember that the presence of a negative-concept attribute indicates that something isn't the case – nicodemus13 Oct 14 '15 at 09:51