jQuery selector for empty value

Question

How could I create a selector to use with .is() function in jQuery that represents the following expressions:

$('[name="Person[firstName]"]').val() === ''; // true
$('[name="Person[lastName]"]').val() === ''; // false

With this HTML context

<input name="Person[firstName]" value="" >
  <foo bar="true" />
</input>

<input name="Person[lastName]" value="ABCDEFGH" />

:empty Selector Select all elements that have no children (including text nodes).

 $('[name="Person[firstName]"]').is(':empty'); // false
 $('[name="Person[lastName]"]').is(':empty'); // true

Another try

$('[name="Person[firstName]"]').is('[value=""]'); // true
$('[name="Person[lastName]"]').is('[value=""]'); // true

Note: This is a question for knowledge purposes - and .is() must be used in this solution.

@edit http://jsfiddle.net/2CzWu/2/

It must return false on both expressions

Thas not the point. It's only a example to avoid anwsers like this api.jquery.com/empty-selector — Ragen Dazs
– Ragen Dazs, Commented Mar 19, 2013 at 23:51
@Allyson, and .is() must be used in this solution. Why? Using is() seems counter-productive to the results you want to achieve. — Frédéric Hamidi
– Frédéric Hamidi, Commented Mar 19, 2013 at 23:52
Your statement that $('[name="Person[lastName]"]').is('[value=""]') returns true does not seem to be the case. The code in that block seems to work as expected for me. jsfiddle.net/2CzWu/1 — Ruben Infante
– Ruben Infante, Commented Mar 19, 2013 at 23:55
@FrédéricHamidi I believe the OP wants to create a boolean expression to emulate the first code block using the .is() method. — Ruben Infante
– Ruben Infante, Commented Mar 19, 2013 at 23:57
@RubenInfante You are right! The statement are working thanks! I will close this question — Ragen Dazs
– Ragen Dazs, Commented Mar 19, 2013 at 23:59

Ruan Mendes · Accepted Answer · 2014-04-16 22:05:56Z

5

The reason :empty doesn't work is because it's looking for nodes without child nodes, which is not what you are looking for.

$.is("[value='']") will only work with values that were set in the HTML initially, not as you update it whether through a script or by the UI. That is because the attribute selector looks at Node.getAttribute('value') === '' and the XML attribute is not updated when the DOM object is, but the DOM property HTMLInputElement.value does.

So what we really need is a custom pseudo selector that looks at the value DOM property and it's pretty simple to implement. It works with $.is and with :not()

$.expr[':'].emptyVal = function(obj){
   return obj.value === '';
};

var $firstName = $('[name="Person[firstName]"]');

$firstName.val('AAAA');

$('input:emptyVal').size(); // 2
$('input:not(emptyVal)').size(); // 0
$firstName.is('input:emptyVal'); // false
$firstName.is('input:not(:emptyVal)'); // true

edited Apr 16, 2014 at 22:05

answered Mar 20, 2013 at 0:01

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

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

3 Comments

Ragen Dazs Over a year ago

Yes I miss a typo on my project :(

Ragen Dazs Over a year ago

Ops maybe it's really wrong. When I edited the firstName and execute this code the result it's not right

Ruan Mendes Over a year ago

@AllysondePaula That's because jQuery.val('aaaa') doesn't set the value attribute on the node. If you use jQuery.attr('value', 'aaaa') it will work jsfiddle.net/2CzWu/3 I'm afraid there's not much you can do about that

Collectives™ on Stack Overflow

jQuery selector for empty value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related