Check with jQuery if an input is empty

Question

How can I check in jQuery if an input is empty ?

I tried:

$('#location').keydown(function(event) {
  if($("#location").val().length == 0 ) { $("#finalSearch").attr('disabled', 'true'); }
  if($("#location").val().length != 0 ) { $("#finalSearch").removeAttr('disabled'); }
});

But, I want the alert pop even if there's nothing in my field.

What I want to do:

There's nothing: error message.
There's one letter: no error message.
I remove this letter: error message.
If the field is populate but another function: no error message.

Thanks for help.

you can't detect field being filled by a function unless the other function triggers an event on the field and your handler code for the event then manages what you want — charlietfl
– charlietfl, Commented Dec 17, 2012 at 1:18
If 'keydown' event doesn't works for you, you must try 'keyup/keypress ' events with jquery events such as 'bind/delegate/on'. It should work on any one of these as i faced your issue several times before. — RGR
– RGR, Commented Dec 17, 2012 at 4:25

nnnnnn · Accepted Answer · 2012-12-17 01:21:48Z

5

You should use the keyup event rather than keydown - on key down the field hasn't updated yet so testing the value at that point doesn't give you the right result.

It wouldn't hurt to do the same test on blur too, to allow for if the user changed the field via the Edit menu or drag'n'drop or whatever.

Also, unless using a really old version of jQuery use the .prop() method rather than .attr() to set the disabled state:

$('#location').on('keyup blur', function(event) {
   $("#finalSearch").prop('disabled', this.value.length === 0);
});

answered Dec 17, 2012 at 1:21

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

Comments

Ohgodwhy · Accepted Answer · 2012-12-17 01:21:01Z

1

you're pretty much already there, not sure where the issue is for you; but this works.

$('#location').on('keyup', function() {
    console.log($(this).val().length);
    if($(this).val().length == 0) {
        $('#finalSearch').prop('disabled', true);
    }else{
        $('#finalSearch').prop('disabled',false);
    }
});

The jsFiddle

answered Dec 17, 2012 at 1:21

Ohgodwhy

50.9k11 gold badges86 silver badges114 bronze badges

1 Comment

F__M Over a year ago

Solution was keyup. Thanks.

Collectives™ on Stack Overflow

Check with jQuery if an input is empty

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related