JQuery Blur Validation Problem

Question

I have a simple form that I want to validate using blur if the text field is empty.

The below code should work, but keeps alerting me even if I pop in some text, please, what am I doing wrong?

var name = $("input#name").val();
$("input#name").blur(function() 
{
      if (('input#name:empty'))
      {
            // Testing
            alert('Empty');
      }
});

Answer 1

Try this:

$("input#name").blur(function() 
{
  var name = $(this).val();
  if (name.length == 0)
  {
        // Testing
        alert('Empty');
  }
});

Edit: Nick pointed out that the input text needs to checked when the blur happens. If I make any more change, it will be just like his answer, so I stop here.

Answer 2

You want to use $(this).val(), like this:

$("input#name").blur(function() {
   if ($(this).val().length === 0) {
     // Testing
     alert('Empty');
   }
});

Currently you're checking if('input#name:empty') which is true, any string is going to be true in JavaScript (which is weakly typed). Also the :empty selector checks that it has no child elements, not that its value is empty, so check that the value is an empty string, or the .length is empty like I have above :)

Also, unless there is the possibility of this ID being on another element type you don't want to match, #name will suffice and be faster, the input prefix is superfluous.