Question

Using the below I am checking every input field is not empty

  if ( $("input:empty").length > 0 )
  {
  $(":text[value=]").css('background', 'rgb(255,220,200)'); 
  $(":text[value!=]").css('background', 'rgb(255,255,255)'); 
  alert('One or more fields are not completed') 
  e.preventDefault();
  return false;     
  }  

Even when all fields are full I still get an alert. What are the gotchas here? No fields highlight. I did try to extract which field it is but it came back with nothing.

Answer 1

:empty does not refer to whether or not an input has content. It refers to whether or not a node has children. Since I don’t imagine you have put anything INSIDE your input tags, it’s working just fine 😉

From the docs:

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

try if ( $('input:text[value=""]').length > 0 )

example