2

Preciso testar se um atributo data-* existe em um elemento e se esse atributo está preenchido com algum valor:

<input type="text" id="teste" data-validationMessage="Esse campo é obrigatório" /> <!-- Deve retornar true -->

<input type="text" id="teste" data-validationMessage="" /> <!-- Deve retornar false -->
    
<input type="text" id="teste" /> <!-- Deve retornar false -->

Qual a maneira mais segura de fazer essa validação com JavaScript?

2 Respostas 2

5

Só testar se o método getAttribute retorna algo.

Código de exemplo (mudeis os ids dos elementos pra poder executar o snippet.

validaDataAttribute(document.getElementById('teste'));
validaDataAttribute(document.getElementById('teste2'));
validaDataAttribute(document.getElementById('teste3'));

function validaDataAttribute(input){
  var dataAttr = input.getAttribute('data-validationMessage');
    
  if(dataAttr){
    console.log(input.id + ' contém o atributo data-validationMessage com um valor');
  }
}
<input type="text" id="teste" data-validationMessage="Esse campo é obrigatório" />
<input type="text" id="teste2" data-validationMessage="" /> 
<input type="text" id="teste3" /> 

1

O método que verifica se um atributo existe é o Element.hasAttribute().

No entanto se deseja trabalhar com atributos data-* você deve usar preferencialmente (pois é mais fácil de trabalhar) a propriedade HTMLElement.dataset (somente leitura) que retorna um DOMStringMap com os valores dos seus atributos, por exemplo:

const el = document.getElementById('teste');

console.log('Mapeando', el.dataset);
console.log('validationMessage (invalido)', el.dataset.validationMessage);
console.log('validationmessage (valido)', el.dataset.validationmessage);
console.log('track', el.dataset.track);
console.log('ignore', el.dataset.ignore);
console.log('index', el.dataset.index);
console.log('foo', el.dataset.foo);
console.log('bar', el.dataset.bar);
console.log('baz (não existe)', el.dataset.baz);
<input type="text" id="teste"
   data-validationMessage="Esse campo é obrigatório"
   data-track="true"
   data-ignore="false"
   data-index="1"
   data-foo="null"
   data-bar=""
/>

Note que todos valores retornados são do tipo string e que todas propriedades foram tratadas como lowercase, isso ocorre porque os valores camelCase são "reservados" para o uso do hífen nos atributos, por exemplo:

const el = document.getElementById('teste');

console.log('Mapeando', el.dataset);
console.log('validationMessage', el.dataset.validationMessage);
<input type="text" id="teste"
   data-validation-message="Esse campo é obrigatório"
/>

Também é importante entender que para o HTML e para as funções hasAttribute ou getAttribute é irrelevante você escrever os atributos em camelCase, pois sempre serão tratados como case-insensitive:

const el = document.getElementById('teste');

console.log('data-validationMessage', el.hasAttribute("data-validationMessage"));
console.log('DATA-VALIDATIONMESSAGE', el.hasAttribute("DATA-VALIDATIONMESSAGE"));
console.log('DATA-VALIDATIONMESSAGE', el.getAttribute("DATA-VALIDATIONMESSAGE"));
<input type="text" id="teste"
   data-validationMessage="Esse campo é obrigatório"
/>

Já com HTMLElement.dataset existe a padronização, que faz a conversão dos nomes, aonde os atributos dash-style serão convertidos para chaves em camelCase no DOMStringMap, seguindo:

  • Letras minúsculas serão todos os ASCII
  • Letras maiúsculas de A a Z
  • Removerá os prefixos data-* (incluindo os traços)
  • Qualquer traço (U+002D) seguido por uma letra (ASCII) de a a z, irá remover o traço e irá colocar a letra seguida em maiúsculo
  • Outros caracteres (incluindo outros traços) permanecerão inalterados

Como pode ver:

const el = document.getElementById('teste');

console.log('Mapeando', el.dataset);
<input type="text" id="teste"
   data-afoo-ebar-obaz="'a' a 'z' se tornarão camelCase"
   data-áfoo-ébar-óbaz="Caracteres diferentes de 'a' a 'z' não mudarão"
   data-Áfoo-Ébar-Óbaz="Caracteres diferentes de 'a' a 'z' não mudarão"
   data-&foo-%bar-*baz----="outros caracteres ASCII"
/>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .