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.