checking if form inputs are empty with jquery

Question

There are some other threads which ask this question, but I think I think I have a slightly different issue.

I am trying to make a form where the submit button initially is disabled, and when the form is complete the button will become enabled. After struggling for a while, I found a post which I modeled the following code:

$('input, textarea, select').blur(function()
{
  if( !$(this).val() ) {
    $('#submit').removeAttr('disabled');
  }
});

I soon realized that this wasn't going to work because in this code, the "this" refers only to the input tag which you just left, not all of the input tags at once. How can I refer to all of the input, select, and textarea tags at once in order to check if ALL of them are not empty?

Also, the way I made my form was that not all of the input boxes showed up at once. Some inputs didn't apply to people who answered "no" to a certain question, so I used the jquery slide up and down to get rid of them etc. Initially those tags are not showing. Do I have to modify this jquery function for it to check if those inputs are empty as well?

See my answer, Joseph. You're deploying an easy setup, instead of a comprehensive setup. You will probably be better served just doing a real validation, instead of a simple, blanket one. — Jared Farrish
– Jared Farrish, Commented Sep 4, 2011 at 19:43

PeeHaa · Accepted Answer · 2011-09-04 23:12:46Z

2

Simply loop through all elements you want to check:

$('input, textarea, select').blur(function() {
  var valid = true;
  $('input, textarea, select').each(function() {
    if (!$(this).is(':visible')) return true; // check if element is displayed
    if( !$(this).val() ) {
      valid = false;
      return false; // form is not valid so no need to go any further
    }
  });

  if (valid) {
    $('#submit').removeAttr('disabled');
  }
});

EDIT

Regarding to your hidden input fields.

Add an extra check to see if element is visible.

Please remember to also always check on the server side!

edited Sep 4, 2011 at 23:12

answered Sep 4, 2011 at 19:33

PeeHaa

73.1k60 gold badges194 silver badges264 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jared Farrish Over a year ago

+1 on the server side caveat. I would personally focus more on the server side, and just do the client side if needed or requested in addition to.

PeeHaa Over a year ago

@Jared Farrish: How come there is no +1 on my answer than? ;) Well you should do it all on the server side, however doing this also on the client side is much more user friendly.

Jared Farrish Over a year ago

Probably for the same reason you haven't upvoted my answer... :P Ah, what the hell.

PeeHaa Over a year ago

@shesek: close, but not exactly: Selects all input, textarea, select and button elements.

Joseph Over a year ago

Your code make sense, but for some reason its not working... Is there a typo somewhere that I'm missing?

|

shesek · Accepted Answer · 2011-09-04 20:01:29Z

One way, which is quite graceful IMO, is using a custom pseudo selector that can be used to find empty elements. First of all, add it using:

$.expr[':'].novalue = function(a) { return $(a).val().length === 0; };

Than, when you need to test if all the inputs are non-empty (probably in $(':input').blur(...)),

if ($(':input:novalue', form_element).length === 0) {
   // All the inputs has a value
   $('#submit').removeAttr('disabled');
} else {
   // Some of the inputs are empty
}

(form_element being the... well, <form> element)

Jared Farrish · Accepted Answer · 2011-09-04 19:42:30Z

0

$('input, textarea, select').blur(function(){
    checkSubmit();
});

function checkSubmit() {
    var $vals = $('input:not([type="submit"]), textarea, select');
    var $total = $vals.size();
    var $count = 0;
    $vals.each(function(){
        if(!$this).val()) {
            $count++;
        }
    });
    if ($total === $count) {
        $('#submit').removeAttr('disabled');
    }
}

Reading your edit as well, I think you will want to just go ahead and do a validation setup on submit instead of something like this, that will be potentially more difficult than just validating the fields. To answer your last question, though, yes, you would need to adjust the query (note my adjustment for the input[type="submit"]).

edited Sep 4, 2011 at 19:42

answered Sep 4, 2011 at 19:36

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

2 Comments

Jared Farrish Over a year ago

@Joseph - See this answer I wrote for a more comprehensive approach: stackoverflow.com/questions/7059441/…

shesek Over a year ago

The first selector, input, textarea, select is the same as :input. The [type="submit"] part it the same as :submit, so the second selector can be replaced with :input:not(:submit)

Collectives™ on Stack Overflow

checking if form inputs are empty with jquery

3 Answers 3

7 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

2 Comments

Linked

Related