Using .blur() inside of .each()

Question

I am after some advice on whether this is something that can be performed or not. I have a script which checks for Lat/Lng of an address. If there is nothing in the field, it will highlight the fields with the class of address.

What I am looking for is when the information is entered into each field and it has then lost focus, that the styling for an empty field be removed and put back to regular styling.

The issue I am facing is that I cannot get it to work. I have had a look in Firebug to see if it is throwing and error and it doesn't. I have had a look around the net and on here, but nothing seems to match my exact issue.

The code I have is as follows:

if($('#latlngaddress').val().length == 0)
{
    $('#error').slideDown();
    $('#error').html('');
    $('#error').append('Sorry, you need to enter an address');
    $('#lat').val('');
    $('#lng').val('');
    $('.address').each(function()
    {
        var add = $(this);
        add.css('border', '1px solid #C33');
        add.css('background-color', '#F6CBCA');
    });
}

If the fields have information then obviously it will go to the else clause and this is what I have in there:

else
{
    $('.address').each(function()
    {
        var add = $(this);
        add.blur(function()
        {
            add.css('border', '1px solid #000');
            add.css('background-color', '#FFF');
        });
    });
}

I have tried several ways of the .blur(). I have done $(this).blur() I have also tried $('.address.').blur()

The issue is that it doesn't change the field styling after focus being lost.

Now, when I take out the blur() function it works perfectly (obviously when all fields are filled).

My form fields are as follows:

<input name="address1" id="address1" class="address" type="text" tabindex="4" />
<input name="address2" id="address2" type="text" tabindex="5" />
<input name="town" id="town" class="address" type="text" tabindex="6"  />
<input name="county" id="county" class="address" type="text" tabindex="7"  />
<input name="postcode" id="postcode" class="address" type="text" tabindex="8"  />
<input name="country" id="country" type="text" tabindex="9" class="required address"/>
<input type='button' id="getll" value='Get Lat/Lon'>

I'm not sure if it can be done. Like I say, just looking for some advice.

Answer 1

Update

Based on your comments, it appears you want something like this which simply checks the val() of the blurred field and colours according to the presence/absence of a value:

JSFiddle http://jsfiddle.net/ULaUm/5/

// Set initial state
$('.address').css({
    'border': '1px solid #C33',
        'background-color': '#F6CBCA'
});

$('.address').blur(function () {
    var $this = $(this);
    if ($this.val() == "") {
        $this.css({
            'border': '1px solid #C33',
                'background-color': '#F6CBCA'
        });
    } else {
        $this.css({
            'border': '1px solid #000',
                'background-color': '#FFF'
        });
    }
});

If this is not exactly what you wanted, please do explain, in some detail, what you wnat to happen.

Previous notes:

Basically your var add = $(this) value is obsolete in the blur callback (it has the value of the last each call when the blur event triggers. It does not create one local variable called add in each iteration of the each call, just one variable at that scope that is redeclared over and over.

You do not need to use each() in jQuery if you are applying the same thing to all matching items. Just apply the various blur/css calls to the jQuery collection.

JSFiddle to play with: http://jsfiddle.net/ULaUm/

$('#error').slideDown();
$('#error').html('');
$('#error').append('Sorry, you need to enter an address');
$('#lat').val('');
$('#lng').val('');
$('.address').css('border', '1px solid #C33').css('background-color', '#F6CBCA');

$('.address').blur(function () {
    $(this).css('border', '1px solid #000');
    $(this).css('background-color', '#FFF');
});

Note: this code is not optimal (too much duplication), but just to give you something simpler to play with than using each

A more compact version uses object notation for multiple CSS properties:

$('.address').css({'border': '1px solid #C33', 'background-color':  '#F6CBCA'});

$('.address').blur(function () {
    $(this).css({'border': '1px solid #000', 'background-color': '#FFF'});
});

you can even chain them together:

$('.address').css({'border': '1px solid #C33', 'background-color':  '#F6CBCA'}).blur(function () {
    $(this).css({'border': '1px solid #000', 'background-color': '#FFF'});
});

As reyaner suggests, you should use class changes and let a style-sheet take care of the appearance.

Answer 2

Maybe this will help:

//form or some parent container
$('form').on('blur', '.address', function(){
    $(this).addClass("doTheStylingHereClass"); //its just smarter to it it like this
});

.doTheStylingHereClass {
    border: 1px solid #000;
    background-color: #fff;
}