0

Tenho uma pagina com vários <input> e alguns deles são obrigatórios, esses <input> não estão em uma tag <form>, logo, creio que o required não consegue trabalhar nessa situação. Tenho feito a verificação na mão mesmo:

if(codBarras == null || codBarras == '')
    toastr.error('O Código de Barras é obrigatório!');
else if(dataVencimento == null || dataVencimento == '')
    toastr.error('A Data de Vencimento é obrigatório!');
else
    console.log('Faça algo!');

Porém, eu gostaria de saber se é possível criar uma espécie de atributo para eu colocar nos <input> para fazer essa verificação, ficando da seguinte maneira:

Até o momento:

<input type="text" class="form-control" name="iptCodBarras">

Após a criação do atributo:

<input type="text" class="form-control" name="iptCodBarras" needed="true">

Minha intenção seria colocar o "atributo" needed="true" nos <input> que eu gostaria que fossem obrigatórios.

Resposta:

Segui a resposta do Marcel Felipe e consegui exatamente o que eu precisava, aproveitei o inicio each que ele menciona na resposta e criei o seguinte bloco:

var emBranco = 0;
$("[needed=true]").each(function(){
    if($(this).val() == '' || $(this).val() == null)
    {
        emBranco++;
        toastr.error('Existem campos obrigatórios em branco!');
        $(this).css({'border': '1px solid salmon'});
        $(this).on('focus', function(){
            $(this).removeAttr('style');
        });
    }
});
if(emBranco == 0)
    console.log('Todos os campos obrigatorios estão preenchidos!');

O bloco anterior verifica todos os <inputs> que estão com o atributo needed="true" se estão preenchidos, caso algum não esteja, irá incrementar a variável emBranco e mostrar o toastr de erro, caso todos estão preenchidos, a variavel terá continuará com o valor 0 e executará a ação desejada. Os <inputs> que estiverem em branco, irão ficar com a borda avermelhada (semelhante ao required) e quando o usuário clicar nesses <inputs> em branco, removerá a borda avermelhada.

4
  • 1
    Possível duplicata de Atributos personalizados HTML
    – NoobSaibot
    Commented 12/08/2018 às 21:18
  • data-needed é o indicado pela documentação oficial, assim como está na resposta linkada pelo @NoobSaibot
    – Isac
    Commented 12/08/2018 às 22:20
  • @NoobSaibot A ideia do data-* é excelente e muito bem-vinda, mas a resposta do Marcel resolveu perfeitamente minha pergunta e ainda registrou aqui no StackOverflow uma técnica que eu creio que não são todos que conhecem. Talvez minha pergunta possa ser duplicata, mas obtive sucesso e ainda um conhecimento novo, acho valida a permanência da pergunta para aprendizado de outras pessoas que passarem por aqui.
    – D. Watson
    Commented 12/08/2018 às 22:57
  • @J.Thatcher Duplicata não significa que tenha de ser removida. A pergunta mesmo como duplicata deve permanecer pois muitas vezes é outro ponto de entrada para chegar ao mesmo problema. Outra forma de chegar ao mesmo problema por pesquisa no Google. O que o duplicata indica é que as respostas não se devem repetir pois são as mesmas!
    – Isac
    Commented 14/08/2018 às 9:23

2 Respostas 2

2

Você pode alterar sua declaração DOCTYPE, ficaria assim:

<!ATTLIST element-name attribute-name attribute-type attribute-value>

DTD example:
<!ATTLIST input obrigatorio CDATA "true">

XML example:
<input type="text" obrigatorio="true" />

Ao buscar o atributo pela tag o javascript o reconhece:

<!ATTLIST element-name attribute-name attribute-type attribute-value>

DTD example:
<!ATTLIST input obrigatorio CDATA "true">

XML example:
<input type="text" obrigatorio="true" />

<script type="text/javascript">
	alert(document.getElementsByTagName('input')[0].getAttribute('obrigatorio'));
</script>

Usando Jquery você pode buscar todos os elementos que possuem o atributo e fazer uma validação dinâmica:

$("[obrigatorio=true]").each(function(data){
    if(!data) alert("Inválido");
});

Você pode ler mais sobre isso no seguinte link: https://www.w3schools.com/xml/xml_dtd_attributes.asp

7
  • Toda vez que quiser criar um novo atributo terá que adicionar <!ATTLIST input nome_atributo CDATA "true"> no código? Pergunto porque é a primeira vez que vejo isso.
    – NoobSaibot
    Commented 12/08/2018 às 21:29
  • Isso mesmo. Mas recomendo você a verificar bem os atributos da sua tag antes de criar novos, pode ser que o que você precisa já exista.
    – Marcel
    Commented 12/08/2018 às 21:39
  • Interessante essa ideia. Estou pensando em verificar o value dos <input> que estiverem com a tag obrigatorio=true, caso seja null ou vazio, aciono a mensagem de campo obrigatório. Acha que é possivel?
    – D. Watson
    Commented 12/08/2018 às 21:40
  • Entendi, não fui eu que criei a pergunta. Bom, mais não seria mais fácil utilizar data-*? Como na pergunta marcada como duplicata? Atributos personalizados HTML
    – NoobSaibot
    Commented 12/08/2018 às 21:41
  • Agora que eu acabei de ver o link que você marcou no comentário, me parece melhor sim, essa é uma ideia que eu não conhecia.
    – Marcel
    Commented 12/08/2018 às 21:43
0

Use uma classe para os inputs obrigatórios.

Para cada input sem value recupere o valor do atributo data-id e concatene-os a fim de apresentar em uma div.

1 - exemplo sem código de barras e sem data de vencimento

$(document).ready(function() {
   var erros = "";
	$('.obrigatorio').each(function (i, el) {
	   var data = $(el).val();
           if(data == null || data == ''){
              erros += ($(this).attr("data-id") + "<br>");
              $(this).css({'border': '1px solid salmon'});
           }
           var len = data.length;
           if (len<1) {
               $( ".error" ).html(erros);
               event.preventDefault();
               return;
           }
       });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="error"></div>

1 <input type="text" name="codBarras" value="" data-id="O Codigo de Barras é obrigatorio" class="obrigatorio">
  <br/>
2 <input type="text" name="dataVencimento" value="" data-id="A Data Vencimento é obrigatória" class="obrigatorio">
  <br/>
3 <input type="text" name="c" value="" data-id="Não obrigatorio" class="nao" placeholder="Não obrigatório">

2 - exemplo sem data de vencimento nulo

$(document).ready(function() {
   var erros = "";
	$('.obrigatorio').each(function (i, el) {
	   var data = $(el).val();
           if(data == null || data == ''){
              erros += ($(this).attr("data-id") + "<br>");
              $(this).css({'border': '1px solid salmon'});
           }
           var len = data.length;
           if (len<1) {
               $( ".error" ).html(erros);
               event.preventDefault();
               return;
           }
      });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="error"></div>

1 <input type="text" name="codBarras" value="2134567455676" data-id="O Codigo de Barras é obrigatorio" class="obrigatorio">
  <br/>
2 <input type="text" name="dataVencimento" value="" data-id="A Data Vencimento é obrigatória" class="obrigatorio">
  <br/>
3 <input type="text" name="c" value="" data-id="Não obrigatorio" class="nao" placeholder="Não obrigatório">

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 .