Count how many empty fields are in the form with Jquery

Navigation
1

I have the following fields coming from the database: 

<?php 
while($peListar = mysqli_fetch_object($sqlListar){
    .....
    $listar .= "<td style='".$fundo."'><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>";
    $listar .= "<td style='".$fundo."'><input type='text' name='ValorII[]' class='md-form-control' value=''></td>";
    $listar .= "<td style='".$fundo."'><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>";
    $listar .= "<td style='".$fundo."'><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>";
    .....
}
?>

But I would like to count how many empty fields it has, that is, how many fields were not entered by the user. It is understood that I do not want a field validation;), but only count the total of how many fields that were not filled. I tried using the code below, but it did not work: 

....
$(\"[name^='ValorI']\").on(\"input\", function(){
.....
var myForm = this.form;
var vazios = 0;
for(var i = 0; i < myForm.elements.length; i++) {
if (myForm.elements[i].value === \"\")
 vazios += 1;
}
alert(vazios);
....
    
asked by anonymous 30.04.2018 / 15:14

2 answers

1

You can do this with filter . It will only return the number of empty fields in the line: 

$("[name^='ValorI']").on("input", function(){

   var linha = $(this).closest("tr"); // seleciona a linha TR
   
   // busca os inputs na linha com name iniciando com "ValorI"
   var campos = $("[name^='ValorI']", linha);

   // conta apenas os vazios
   var vazios = campos.filter(function(){
       return !$(this).val();
   }).length;

   console.log(vazios);
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableborder="1">
   <tr>
      <td><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>
      <td><input type='text' name='ValorII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>
   </tr>
   <tr>
      <td><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>
      <td><input type='text' name='ValorII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>
   </tr>
   <tr>
      <td><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>
      <td><input type='text' name='ValorII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>
   </tr>
</table>
    
30.04.2018 / 15:29
1

In a more direct way, just fill in the inputs, the function will count how many are null.

When you use name^='ValorI' you are excluding the last input of each line. 

$("[name^='ValorI']").on("input", function(){
var matches = 0;

    $("[name^='ValorI']").each(function(i, val) {
       if ($(this).val() == '') {
          matches++;
       }
    });

console.log(matches);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableborder="1">
   <tr>
      <td><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>
      <td><input type='text' name='ValorII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>
   </tr>
   <tr>
      <td><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>
      <td><input type='text' name='ValorII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>
   </tr>
   <tr>
      <td><input type='text' name='ValorI[]'  class='md-form-control'  value=''></td>
      <td><input type='text' name='ValorII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorIII[]' class='md-form-control' value=''></td>
      <td><input type='text' name='ValorFinal[]' class='md-form-control' value=''></td>
   </tr>
   
</table>
    
30.04.2018 / 21:30
Date format error when it is Brazilian Daylight Saving Day (BRST) Error converting 'int' to 'int *'