How to create an attribute for an HTML tag? Something similar to the existing "required"

Question

I have a page with several <input> and some of them are mandatory, these <input> are not in a tag <form>, therefore, I believe that the required cannot work in this situation. I have done the check in hand same:

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!');

However, I would like to know if it is possible to create a kind of attribute for me to put in <input> to make this check, being as follows:

So far:

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

After the creation of the attribute:

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

My intention would be to put the "attribute" needed="true" us <input> that I would like to be obligatory.

Answer:

I followed Marcel Felipe’s reply and got exactly what I needed, I took advantage of the beginning each that he mentions in the answer and created the following block:

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!');

The previous block checks all <inputs> who have the attribute needed="true" if they are filled in, if any are not filled in, will increment the variable emBranco and show the toastr error, if all are filled, the variable will continue with the value 0 and execute the desired action. The <inputs> that are blank, will be left with the reddish edge (similar to the required) and when the user clicks on these <inputs> blank, remove the reddish border.

Answer 1

You can change your DOCTYPE declaration, it would look like this:

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

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

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

When fetching the attribute by tag javascript recognizes it:

<!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>

Using Jquery you can search all the elements that have the attribute and make a dynamic validation:

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

You can read more about it at the following link: https://www.w3schools.com/xml/xml_dtd_attributes.asp

Answer 2

Use a classe for the mandatory inputs.

For each value-free input recover the attribute value data-id and invite them to present in a div.

1 - example without barcode and no due date

$(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 - example without an expiry date

$(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">