Gli attributi di dati HTML5 vuoti sono validi?

Mi piacerebbe scrivere un semplice plugin jQuery che visualizza le modline in linea sotto gli elementi specificati. La mia idea è che lo script venga avviato automaticamente in base agli attributi dei dati specificati sugli elementi.

Un esempio molto semplice:

Hover over me for an inline modal!

Mi chiedo se il data-modal-target nell’esempio precedente sia valido o debba essere data-modal-target="true" ? Non mi interessa niente di più di IE9, ecc., Il mio unico requisito è che sia HTML5 valido.

Sì, perfettamente valido. Nel tuo caso, data-modal-target rappresenterebbe un attributo booleano:

2.4.2 Attributi booleani

La presenza di un attributo booleano su un elemento rappresenta il valore vero e l’assenza dell’attributo rappresenta il valore falso.

Le specifiche degli attributi dei dati personalizzati non menzionano alcuna modifica alla gestione degli attributi vuoti, quindi le regole generali sugli attributi vuoti si applicano qui:

Alcuni attributi possono essere specificati fornendo solo il nome dell’attributo, senza valore.

Nell’esempio seguente, l’attributo disabled viene fornito con la syntax attributo vuota:

  

Si noti che la syntax degli attributi vuota equivale esattamente a specificare la stringa vuota come valore dell’attributo, come nell’esempio seguente.

  

Pertanto, è consentito utilizzare attributi di dati personalizzati vuoti, ma è necessario un trattamento speciale per utilizzarli come booleano.

Se si accede ad un attributo tramite element.dataset :

  • Quando è presente un attributo vuoto, il suo valore è "" .
  • Quando un attributo è assente, stai diventando undefined .

Pertanto, non puoi semplicemente controllare come if (element.dataset.myattr) perché sarà sempre false .

Puoi e dovresti controllare gli attributi booleani come if (element.dataset.myattr !== undefined) .


La risposta di Lloyd è errata. Menziona il collegamento agli attributi booleani microsyntax, ma gli attributi data-* non sono specificati come valori booleani nelle specifiche.

Sì, è una syntax valida per omettere il valore per un attributo di dati personalizzato.

“Gli attributi possono essere specificati in quattro modi diversi:

Sintassi attributo vuoto Solo il nome dell’attributo. Il valore è implicitamente la stringa vuota. […] ” https://developers.whatwg.org/syntax.html#attributes-0

Da un lato, passa il validatore 16.5.7 https://validator.w3.org/nu/#textarea :

     a     

Dall’altro, HTML5 non dice nelle specifiche degli attributi dei data- che sono booleani: https://www.w3.org/TR/html5/dom.html#custom-data-attribute mentre lo dice molto chiaramente per altri attributi booleani come checked https://www.w3.org/TR/html5/forms.html#attr-input-checked