CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Richard Harris
Richard Harris

Reputation: 939

How to select empty inputs (value="") using jQuery

How can I check for empty values of (required) input fields within a section, and then add a class to them on an event, using jQuery? So far, I have tried:

jQuery("#sender_container input.required").val("").addClass("error");

But that seems to SET the value, rather than checking it. Any ideas?

Upvotes: 59

Views: 80395

Answers (7)

rmil
rmil

Reputation: 76

to get all fields inspected this might help.

$('#sender_container [required]').each(function(index)
{
       if (!($(this).val())) $(this).addClass('error');
}

});

Upvotes: 0

schmijos
schmijos

Reputation: 8755

If you only need to select based on the initial attribute value of the input then the following will do:

var elements = $('#sender_container input.required[value=""]')

But be aware that this won't work if the value attribute isn't present. It also won't work for the current input value if it has been changed by user or script.

If you'd like to get the current input value you can use jquery's filter function:

var elements = $('#sender_container input.required').filter(function() {
  return this.value === '';

  // alternatively for "no value":
  // return !this.value;
})

After you've selected the jquery elements you can add your class:

elements.addClass('error');

Upvotes: 0

gdoron
gdoron

Reputation: 150313

jQuery("#sender_container input.required").filter(function() {
    return !this.value;
}).addClass("error");​

Why you have to use filter and not [value=""] you can see in this DEMO

The reason is: attribute selectors check the initial state of the element, not the current state. (note that you can change the "initial" state with the attr function, but it's bad practice, you should always use prop)

So if you change the input value, the current value won't effect the attribute selector. not wise... :)

Notes:

  • .val() returns the value of the form element, and breaks the jQuery chain, $('selector').val().addClass('foo') Error, the return value is a string\ number

  • .val(valueToSet) sets the value of the form element and doesn't break the jQuery chain.
    $('selector').val("some value").addClass('foo') - Valid, the returned value is a jQuery

Upvotes: 117

h0mayun
h0mayun

Reputation: 3621

$('input:text[value=]','#sender_container').addClass('error');

DEMO

Upvotes: 11

Parv Sharma
Parv Sharma

Reputation: 12705

$('#sender_container input.required[value=""]').addClass('error')

Upvotes: 3

thecodeparadox
thecodeparadox

Reputation: 87083

jQuery('#sender_container input.required[value=""]').addClass("error");

You can try this:

$('input:not([value!=""])').addClass('error');

DEMO

Note: This answer should not be used, and the only reason it wasn't deleted is so it can be learned from.

Upvotes: 2

Nils
Nils

Reputation: 806

$field = $("#sender_container input.required");
if( ! $field.val())
{
    $field.addClass("error");
}

this simple way may work.

Upvotes: 0

Related Questions