jQuery - simple input validation - "empty" and "not empty"

Question

I have an input that I want to validate:

<input type="text" id="input" />

And here's the JS:

        jQuery("#input").live('change', function() {

            if("#input:not(:empty)") {
                alert('not empty');
            }   

            else if("#input:empty") {
                alert('empty'); 
            }
        });

Even when the "#input" is empty there's no way of displaying alert with "empty" message. So, basically, no matter what I do, only the first statement is true and the second is false, always.

What's wrong?

Possible duplicate of Check if inputs are empty using jQuery — The Codesee
– The Codesee, Commented Mar 9, 2017 at 19:22

Community · Accepted Answer · 2017-05-23 11:46:44Z

32

JQuery's :empty selector selects all elements on the page that are empty in the sense that they have no child elements, including text nodes, not all inputs that have no text in them.

Jquery: How to check if an input element has not been filled in.

Here's the code stolen from the above thread:

$('#apply-form input').blur(function()          //whenever you click off an input element
{                   
    if( !$(this).val() ) {                      //if it is blank. 
         alert('empty');    
    }
});

This works because an empty string in JavaScript is a 'falsy value', which basically means if you try to use it as a boolean value it will always evaluate to false. If you want, you can change the conditional to $(this).val() === '' for added clarity. :D

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Jul 23, 2011 at 15:47

Gordon Gustafson

41.4k26 gold badges119 silver badges160 bronze badges

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

Comments

Jason Gennaro · Accepted Answer · 2011-07-23 15:48:46Z

6

You could do this

$("#input").blur(function(){
    if($(this).val() == ''){
        alert('empty'); 
    }
});

http://jsfiddle.net/jasongennaro/Y5P9k/1/

When the input has lost focus that is .blur(), then check the value of the #input.

If it is empty == '' then trigger the alert.

answered Jul 23, 2011 at 15:48

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Comments

Willem · Accepted Answer · 2011-07-23 15:48:57Z

2

    jQuery("#input").live('change', function() {
        // since we check more than once against the value, place it in a var.
        var inputvalue = $("#input").attr("value");

        // if it's value **IS NOT** ""
        if(inputvalue !== "") {
            jQuery(this).css('outline', 'solid 1px red'); 
        }   

        // else if it's value **IS** ""
        else if(inputvalue === "") {
            alert('empty'); 
        }

    });

answered Jul 23, 2011 at 15:48

Willem

7332 gold badges9 silver badges27 bronze badges

Comments

N.Tec · Accepted Answer · 2020-10-09 08:41:58Z

2

Actually there is a simpler way to do this, just:

if ($("#input").is(':empty')) {
console.log('empty');
} else {
console.log('not empty');
}

src: https://www.geeksforgeeks.org/how-to-check-an-html-element-is-empty-using-jquery/

edited Oct 9, 2020 at 8:41

N.Tec

1272 silver badges14 bronze badges

answered Oct 8, 2012 at 19:14

Mcloide

4225 silver badges16 bronze badges

1 Comment

AlexanderTheGr8 Over a year ago

Actually, coming from now, jQuery 3.5.1, this is not a valid answer. As answered in the accepted answer :empty checks for if the input has children, which is not what the asker wanted. To validate an input using :empty, at least nowadays with :empty does not work, it's wrong. (10 years later than the original answer. But the answer is still here, and upvoted also... Please remove it or update it? For example if it was valid in older versions)

Collectives™ on Stack Overflow

jQuery - simple input validation - "empty" and "not empty"

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related