Comprobando si TODAS las entradas de formulario están vacías con jQuery

Question

Estoy intentando validar un formulario de contacto y quiero crear algún tipo de mensaje de 'formulario completado' una vez que se hayan completado todos los campos de entrada (algunas de las entradas son cuadros de texto , algunos son botones de radio).

Aquí está mi código hasta ahora:

$(document).ready(function() { 
 
    $('.form:input').each(function() { 
 
    if ($(this).val() != "") { 
 
     $('.congrats').css("display", "block"); 
 
    } 
 
    }); 
 
});

p.congrats { 
 
    display: none; 
 
}

<div class="form"> 
 
    <input type="text" /> 
 
    <br /> 
 
    <input type="text" /> 
 
</div> 
 
<p class="congrats">Congrats!</p>

http://jsfiddle.net/7huEr/

Answer 1

Esto debería empezar:

$(document).ready(function() { 
 
    $(".form > :input").keyup(function() { 
 
     var $emptyFields = $('.form :input').filter(function() { 
 
      return $.trim(this.value) === ""; 
 
     }); 
 

 
     if (!$emptyFields.length) { 
 
      console.log("form has been filled"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form"> 
 
    <input type="text" /><br /> 
 
    <input type="text" /> 
 
</div> 
 
<p class="congrats"></p>

Answer 2

probar esto:

$("#a").on('click',function() { 
 
var bad=0; 
 
$('.form :text').each(function(){ 
 
     if($.trim($(this).val()) == "") bad++; 
 
      
 
      
 
    }); 
 
    
 
    if (bad>0) $('.congrats').css("display","block").text(bad+' missing'); 
 
    else $('.congrats').hide(); 
 
}); 
 

 

 

 
    
 
    
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form"> 
 
    <input type="text" /><br /> 
 
    <input type="text" /> 
 
</div> 
 
<p class="congrats"></p><input style="width:100px" value="check" id="a" type="button" />

Answer 3

$('#check').click(function() { 
 
    var allFilled = true; 
 
    
 
    $(':input:not(:button)').each(function(index, element) { 
 
     if (element.value === '') { 
 
      allFilled = false; 
 
     } 
 
    }); 
 
    
 
    console.log(allFilled); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form"> 
 
    <input type="text" /><br /> 
 
    <input type="text" /> 
 
</div> 
 
<p class="congrats"></p> 
 
<input type="button" id="check" value="check" />

Answer 4

jsFiddle: http://jsfiddle.net/7huEr/38/

$(document).ready(function() 
{ 
    // Iterate over each input element in the div 
    $('.form input').each(function() 
    { 
     // Add event for when the input looses focus (ie: was updated) 
     $(this).blur(function() 
     { 
      // Variable if all inputs are valid 
      var complete = true; 

      // Iterate over each input element in div again 
      $('.form input').each(function() 
      { 
       // If the input is not valid 
       if (!$(this).val()) 
       { 
        // Set variable to not valid 
        complete = false; 
       } 
      }); 

      // If all variables are valid 
      if (complete == true) 
      { 
       // Show said congrats 
       $('.congrats').show(); 
      } 
     }); 
    }); 
});​ 

Answer 5

Ésta utiliza la función de jQuery serializeArray, por lo que no tiene que preocuparse acerca de la comprobación diferentes tipos de campos o lo que califica como un campo vacío:

$.fn.isBlank = function() { 
    var fields = $(this).serializeArray(); 

    for (var i = 0; i < fields.length; i++) { 
     if (fields[i].value) { 
      return false; 
     } 
    } 

    return true; 
}; 

Answer 6

Solución de vainilla moderna:

// Returns True if all inputs are not empty 
Array.from(document.querySelectorAll('#myform input')).every(
    function(el){return el.value;} 
)