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

Navigation
0

I have a page with several <input> and some of them are required, these <input> are not in a <form> tag, so I think required can not work in this situation. I have done the verification in the same hand: 

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'd like to know if it's possible to create a kind of attribute for me to put in <input> to do this check, going like this:

So far: 

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

After attribute creation: 

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

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

Answer:

I followed Marcel Felipe's answer and got exactly what I needed, I took advantage of the each start he mentioned 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> that are with the needed="true" attribute if they are filled, if any is not, it will increment the emBranco variable and show% error%, if all are filled, the variable will continue to the value 0 and perform the desired action. The blank% will be with the reddish border (similar to toastr ) and when the user clicks on these <inputs> blank, it will remove the reddish border.

    
asked by anonymous 12.08.2018 / 22:41

2 answers

2

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 searching for the tag attribute, 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 fetch all the elements that have the attribute and do a dynamic validation: 

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

You can read more about this at the following link: link

    
12.08.2018 / 23:17
0

Use classe for required inputs.

For each input without value retrieve the value of the attribute data-id and concatenate them in order to display in a div.

1 - example without bar code and no expiration 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><divclass="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 with no expiration 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><divclass="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">
    
13.08.2018 / 03:21
Send a string name via post using javascript JQuery mask that accepts values up to 10.0