Red item on screen prevent submitting - Javascript / Jquery

Navigation
0

I have a view with 3 divs and 20 input number on each line of my div and a input submit . Each line comes from my bank.

(For this example I will use only 3% with%).

These my inputs number are as if they were 3 categories of anything, that is, I will exemplify here in SCHOOL NOTES and the CATEGORIES will be the STUDENTS.

  

As I use ASP .NET MVC to do the VIEW then I do not use divs , but <input> .. As for me, it makes no difference I write with @Html, because doubt does not refer to this , so I wrote with @Html.TextBox to facilitate. 

function validacao(contagem){
  var botao = false;
  var cor = "black;"
  var total = 0;
  
  /*
  Alem da contagem, eu passo outros parametros, para que eu consiga realizar a
  minha soma, então as removi, pois nao acho necessario para minha duvida.
  */
  
  
  if (total < 9) {
    botao = false;
    cor = "black";
  } else {
    botao = true;
    cor = "red"
  }
    
  for (var i = 0; i <= contagem; i++) {
    $("#meusInputs"+i).css('color', cor);
    $("#btn-salvar").prop('disabled', botao);
  }
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><h3>MediadeNotas</h3><divclass="form-inline">
<div class="form-inline">
<p> Maria </p>
<input type="number" class = "form-control" id="meusInputs"+contagem onblur="validacao("+@contagem+")">
<input type="number" class = "form-control" id="meusInputs"+contagem onblur="validacao("+@contagem+")">
<input type="number" class = "form-control" id="meusInputs"+contagem onblur="validacao("+@contagem+")">
</div>
<div class="form-inline">
<p> Joao </p>
<input type="number" class = "form-control" id="meusInputs"+contagem onblur="validacao("+@contagem+")">
<input type="number" class = "form-control" id="meusInputs"+contagem onblur="validacao("+@contagem+")">
<input type="number" class = "form-control" id="meusInputs"+contagem onblur="validacao("+@contagem+")">
</div>
<br/>
contagem++ // Usado no foreach da minha view ASP .NET MVC <br/>
<input type="submit" value="Salvar" id="btn-salvar">

While completing this page, I perform a validation in which the sum of a line does not exceed 8, if it exceeds the text of all% of that line becomes red and <input> is disabled.

It's validation I perform, obligatorily, on the onblur of EVERY inputs number . However, as I continue to fill in and validate (from the other submit ) become correct (ie, below 8), my input number is back enabled and my doubt is:

  

How do I, if there is at least a inputs number with the text in red, my submit continue DISABLED?

    
asked by anonymous 07.12.2018 / 14:07

1 answer

0

For ease, place one class on each line (I put linhas ). So you can select them and make a loop in them, you can use .each of jQuery. The idea is to go through each line and add the inputs by index (% with% are the first,% with% of seconds, etc.). If the values are greater than 8, disable the button and change the colors (see comments in the code): 

$("[type=number]").on("blur", function(){
   
   // seleciona as linhas
   var linhas = $(".linhas");
   
   // número de inputs por linha
   var num_inps = 3;
   
   // desabilita começa com false
   var desabilita = false;
   
   for(var x=0; x<num_inps; x++){

      // valor da soma começa com 0
      var soma = 0;
      
      // percorre cada linha
      linhas.each(function(){
         soma += Number($("input:eq("+x+")", this).val()) || 0;
      });

      // se for maior que 8 a soma dos campos da linha
      if(soma > 8) desabilita = true;

      // altera as cores
      linhas.each(function(){
         $("input:eq("+x+")", this).css("color", soma > 8 ? "red" : "black");
      });
      
   }
      
   // desabilita ou habilita o botão de for true ou false
   $("[type=submit]").prop("disabled", desabilita ? true : false);
   
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><h3>MediadeNotas</h3><divclass="form-inline linhas">
   <p> Maria </p>
   <input type="number" class = "form-control"><input type="number" class = "form-control"><input type="number" class = "form-control">
</div>
<div class="form-inline linhas">
   <p> Joao </p>
   <input type="number" class = "form-control"><input type="number" class = "form-control"><input type="number" class = "form-control">
</div>
<br/>
<input type="submit" value="Salvar">
  

You do not need to use onblur and id's in the fields.

    
07.12.2018 / 14:42
how to capture an id dynamically and in sequence in postgresql? Problems with the positioning of the dialog of the firstfaces