Question

182

Checking if ALL form inputs are empty with jQuery

rated 0 times [ 187] [ 5] / answers: 1 / hits: 53772 / 12 Years ago, wed, may 9, 2012, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

collinarnoldp

Add To Favorites

Follow

Total Points: 10

Total Questions: 122

Total Answers: 109

Location: Spain

Member since Thu, Dec 23, 2021

2 Years ago

answered 12 Years ago monetm · Accepted Answer

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>