How to select empty inputs (value=“”) using jQuery

Question

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?

Answer 1

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');

Answer 2

For those input.required is not working write as below:

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

Answer 3

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

Answer 4

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

DEMO

Answer 5

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

this simple way may work.

Answer 6

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.