Checking if ALL form inputs are empty with jQuery

Question

I'm trying to validate a contact form and I want to create some sort of 'form completed' message once every input field has been filled in (some of the inputs are text boxes, some are radio buttons).

Here's my code so far:

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

This should get you started:

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

try this :

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