Selecting empty text input using jQuery

Question

How do I identify empty textboxes using jQuery? I would like to do it using selectors if it is at all possible. Also, I must select on id since in the real code where I want to use this I don't want to select all text inputs.

In my following two code examples the first one accurately displays the value typed into the textbox "txt2" by the user. The second example identifies that there is an empty textbox, but if you fill it in it still regards it as empty. Why is this?

Can this be done using just selectors?

This code reports the value in textbox "txt2":

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#cmdSubmit').click(function() {
                    alert($('[id=txt2]').val());
                });             
            });
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="txt1" id="txt1" value="123" /><br />
            <input type="text" name="txt2" id="txt2" value="" /><br />
            <input type="text" name="txt3" id="txt3" value="abc" /><br />
            <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
        </form>
    </body>
</html>

This code always reports textbox "txt2" as empty:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#cmdSubmit').click(function() {
                    if($('[id^=txt][value=""]').length > 0) {
                        if (!confirm("Are you sure you want to submit empty fields?")) {
                            if (event.preventDefault) {
                                event.preventDefault();
                            } else {
                                event.returnValue = false;
                            }
                        }
                    }
                });             
            });
        </script>
    </head>
    <body>
        <form>
            <input type="text" name="txt1" id="txt1" value="123" /><br />
            <input type="text" name="txt2" id="txt2" value="" /><br />
            <input type="text" name="txt3" id="txt3" value="abc" /><br />
            <input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
        </form>
    </body>
</html>

Does anyone know if '[value=]' ignores user input and only checks what's in the source? — Cros, Aug 19 '09 at 12:11
Am I right that the :empty filter is made for this job? $('input[type=text]:empty').doStuff(); — Antony Carthy, Aug 21 '09 at 07:58
read the docs - http://docs.jquery.com/Selectors/empty. Empty is for elements that have no children, NOT no value — Russ Cam, Aug 21 '09 at 10:12

score 206 · Accepted Answer · edited Sep 20 '16 at 15:43

206

Another way

$('input:text').filter(function() { return $(this).val() == ""; });

or

$('input:text').filter(function() { return this.value == ""; });

or

// WARNING: if input element does not have the "value" attribute or this attribute was removed from DOM then such selector WILL NOT WORK! 
// For example input with type="file" and file does not selected.
// It's prefer to use "filter()" method.
// Thanks to @AaronLS
$('input:text[value=""]');

Working Demo

code from the demo

jQuery

 $(function() {

  $('#button').click(function() {

    var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
    var string = "The blank textbox ids are - \n";

    emptyTextBoxes.each(function() {
      string += "\n" + this.id;
    });
    alert(string);
  });

});

edited Sep 20 '16 at 15:43

23W

1,413
18
37

answered Aug 19 '09 at 11:56

Russ Cam

124,184
33
204
266

For me: if($('[id^=txt]').filter(function() { return $(this).val() == ""; }).length > 0) { alert('WARNING'); } – Cros Aug 19 '09 at 12:10
What separates your last example from my second one? I need to select on id, since in the real code I won't look at all text inputs. My second example doesn't work with user input, but yours does. – Cros Aug 19 '09 at 12:16
Why does $('input:text[value=""]'); work, when $('[id^=txt][value=""]'); does not? – Cros Aug 19 '09 at 12:19
1

The working selector seems to be to do with :text in the selector - if you open the working demo and add /edit to the URL, you can play with the selector used. If you take off the :text, the selector no longer works correctly, even with $('input[value=""]'). Possibly a bug in the Sizzle selector engine, but I don't have time to investigate. By the way, I would suggest using an element tag in the selector, otherwise each element will be checked to see if there is a match for the attribute values. – Russ Cam Aug 19 '09 at 12:41
Thanks! It's as you say, and I have added my own answer with that information. Good tip about element tags as well. – Cros Aug 19 '09 at 13:00
Why are you guys making life so complicated? There is no need for this much code. – Antony Carthy Aug 21 '09 at 07:59
3

Nice answer! But you might also want to make sure the input element's value is literally null(blank spaces!). Make sure you trim out the blank spaces in that case. Something like this `$('input:text').filter(function() { return $(this).val().trim() == ""; });` – Vineeth Pradhan Sep 25 '12 at 08:22
32

Note that if the element is present but doesn't have a value attribute then `[value=""]` selector doesn't work since it doesn't find a value attribute. However the .filter technique does work in this scenario. – AaronLS Oct 01 '12 at 16:03
Can you write es6 with an arrow function here? – Jwan622 Feb 13 '18 at 03:45
@Jwan622 if your target browsers support ECMAScript 6, yes – Russ Cam Feb 13 '18 at 04:23

James Wiseman · Answer 2 · 2012-05-25T12:22:34.483

26

You could also do it by defining your own selector:

$.extend($.expr[':'],{
    textboxEmpty: function(el){
        return $(el).val() === "";
    }
});

And then access them like this:

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection

edited May 25 '12 at 12:22

answered Aug 19 '09 at 12:09

James Wiseman

29,946
17
95
158

I'm a little concerned about the performance. But probably the easiest answer! – aliqandil Aug 03 '17 at 14:51

score 20 · Answer 3 · answered Aug 19 '09 at 11:48

20

$(":text[value='']").doStuff();

?

By the way, your call of:

$('input[id=cmdSubmit]')...

can be greatly simplified and speeded up with:

$('#cmdSubmit')...

answered Aug 19 '09 at 11:48

cletus

616,129
168
910
942

I guess there's a closing square bracket missing. A common source of jQuery not working as expected, hard to spot :-/ – OregonGhost Aug 19 '09 at 11:49
Your first example is basically what my not working example does. I want to know if the user added text to the input field, your example does not do this. – Cros Aug 19 '09 at 12:05
I was hasty, your example seems to work, but it doesn't select on id, which I must do. – Cros Aug 19 '09 at 12:19
Doing "input[id=..]" is not the same as "#". # does not give you an array of objects. – dev4life Oct 14 '19 at 18:45
@dev4life if you're using multiple elements on a page with the same ID, you're doing it wrong – Sean Kendle Jan 16 '20 at 16:46
@SeanKendle not really. But to each, their own. – dev4life Mar 20 '20 at 23:12

score 12 · Answer 4 · answered Dec 02 '11 at 02:41

As mentioned in the top ranked post, the following works with the Sizzle engine.

$('input:text[value=""]');

In the comments, it was noted that removing the :text portion of the selector causes the selector to fail. I believe what's happening is that Sizzle actually relies on the browser's built in selector engine when possible. When :text is added to the selector, it becomes a non-standard CSS selector and thereby must needs be handled by Sizzle itself. This means that Sizzle checks the current value of the INPUT, instead of the "value" attribute specified in the source HTML.

So it's a clever way to check for empty text fields, but I think it relies on a behavior specific to the Sizzle engine (that of using the current value of the INPUT instead of the attribute defined in the source code). While Sizzle might return elements that match this selector, document.querySelectorAll will only return elements that have value="" in the HTML. Caveat emptor.

score 6 · Answer 5 · 2012-06-29T15:42:49.807

6

`$("input[type=text][value=]")`

After trying a lots of version I found this the most logical.

Note that text is case-sensitive.

edited Jun 29 '12 at 15:42

answered Jun 29 '12 at 15:25

score 4 · Answer 6 · answered Nov 20 '12 at 20:56

There are a lot of answers here suggesting something like [value=""] but I don't think that actually works . . . or at least, the usage is not consistent. I'm trying to do something similar, selecting all inputs with ids beginning with a certain string that also have no entered value. I tried this:

$("input[id^='something'][value='']")

but it doesn't work. Nor does reversing them. See this fiddle. The only ways I found to correctly select all inputs with ids beginning with a string and without an entered value were

$("input[id^='something']").not("[value!='']")

and

$("input[id^='something']:not([value!=''])")

but obviously, the double negatives make that really confusing. Probably, Russ Cam's first answer (with a filtering function) is the most clear method.

score 4 · Answer 7 · answered Sep 26 '14 at 11:43

Building on @James Wiseman's answer, I am using this:

$.extend($.expr[':'],{
    blank: function(el){
        return $(el).val().match(/^\s*$/);
    }
});

This will catch inputs which contain only whitespace in addition to those which are 'truly' empty.

Example: http://jsfiddle.net/e9btdbyn/

score 3 · Answer 8 · answered Aug 19 '09 at 12:19

3

I'd recommend:

$('input:text:not([value])')

answered Aug 19 '09 at 12:19

TM.

108,298
33
122
127

2

This won't work, because [attribute] looks for the presence of an attribute - not whether it has a value or not. `` will still match. – Ben Hull Apr 07 '10 at 04:47
This was helpful to me when using Laravel for generating form fields (e.g. `{{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}`) because Laravel doesn't add a 'value' attribute if it's blank. So I then used: `$('input:text:not([value]):visible:enabled:first');` to find the first visible empty enabled text input field. – Ryan May 23 '14 at 02:15

score 1 · Answer 9 · answered Aug 19 '09 at 12:57

1

This will select empty text inputs with an id that starts with "txt":

$(':text[value=""][id^=txt]')

answered Aug 19 '09 at 12:57

Cros

4,367
9
41
47

score 0 · Answer 10 · answered Dec 19 '19 at 08:12

0

Since creating an JQuery object for every comparison is not efficient, just use:

$.expr[":"].blank = function(element) {
    return element.value == "";
};

Then you can do:

$(":input:blank")

answered Dec 19 '19 at 08:12

Tires

1,529
16
27

Selecting empty text input using jQuery

10 Answers10

`$("input[type=text][value=]")`

Linked

Related