jQuery blur followed by blur

I want to use jQuery to create around a text input, a green border for valid input and red one for invalid, when the input loses focus. I wrote the code below but it only works for the first blur() event. Is it that a blur event cannot be followed by another blur?

As you can see, the first blur checks if the userID is available while the second ensures that the the input is not empty.

Please I need help. You can correct the code if it needs a minor adjustment or just create a new one if that's to be done. (I'm relatively new to jQuery)

$(document).ready(function($){
        $("#userid").blur(function(){
            $.post("validate.php", {"userid": $("#userid").val(开发者_如何转开发)},
            function(response){
                if (response == 0){
                    $("#userid").css('border', '2px solid #44FF00');
                }
                else {
                    $("#userid").css('border', '2px solid red');
                }
            });
        }).blur(function(){
            if ($("#userid").val()==""){
                $("#userid").css('border', '2px solid red');
            }
            else {
                $("#userid").css('border', '2px solid #44FF00');
            }
        });
    });

Why do you want do blur events when one is enough for you...

$(document).ready(function($){
        $("#userid").blur(function(){
            if ($("#userid").val()==""){
                $("#userid").css('border', '2px solid red');
                return False;
            }
            else {


            $.post("validate.php", {"userid": $("#userid").val()},
            function(response){
                if (response == 0){
                    $("#userid").css('border', '2px solid #44FF00');
                }
                else {
                    $("#userid").css('border', '2px solid red');
                }
            });
}


    });