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     lt html gt       lt head gt           lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt           lt script type  text javascript  gt                function                         cmdSubmit   click function                         alert     id txt2    val                                                               lt  script gt       lt  head gt       lt body gt           lt form gt               lt input type  text  name  txt1  id  txt1  value  123    gt  lt br   gt               lt input type  text  name  txt2  id  txt2  value      gt  lt br   gt               lt input type  text  name  txt3  id  txt3  value  abc    gt  lt br   gt               lt input type  submit  name  cmdSubmit  id  cmdSubmit  value  Send    gt  lt br   gt           lt  form gt       lt  body gt   lt  html gt    This code always reports textbox  txt2  as empty    lt html gt       lt head gt           lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt           lt script type  text javascript  gt                function                         cmdSubmit   click function                         if     id  txt  value       length  gt  0                            if   confirm  Are you sure you want to submit empty fields                                   if  event preventDefault                                    event preventDefault                                  else                                   event returnValue   false                                                                                                                                          lt  script gt       lt  head gt       lt body gt           lt form gt               lt input type  text  name  txt1  id  txt1  value  123    gt  lt br   gt               lt input type  text  name  txt2  id  txt2  value      gt  lt br   gt               lt input type  text  name  txt3  id  txt3  value  abc    gt  lt br   gt               lt input type  submit  name  cmdSubmit  id  cmdSubmit  value  Send    gt  lt br   gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

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

User · Answer

I d recommend      input text not  value

User · Answer

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

User · Answer

input type text  value      After trying a lots of version I found this the most logical   Note that text is case-sensitive

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

text value       doStuff         By the way  your call of      input id cmdSubmit         can be greatly simplified and speeded up with       cmdSubmit

User · Answer

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

User · Answer

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

[jquery] Selecting empty text input using jQuery

Examples related to jquery

Examples related to css-selectors