Question

I have that text field:

<input type='text' id='title' name='title'>
<div id='error' class='error'></div>

When user clicks out of the text field and there is a validation problem, the div “error” appears.

What I want to do is to hide that little div when user clicks anywhere in the body.
I tried e.stopPropagation in the body click event but didn’t work.

The div never appears because when I blur out of the textfield, it’s considered a body click

Please let me know if you have any idea. Regards

EDIT:
I have updated the code. The code inside the body click event is supposed to hide the “error” div when anything but the text field is clicked, but can’t get it to work.

$('body').click(function(event){
        if ($(event.target).closest('#title').get(0) == null ) { 
            $("#error").hide(); 
            }});

// Validation
$('#title').blur(function(){
    var titleinput=$('#title').val();
    if (titleinput.length <30 || titleinput.length >50){
        $('#error').text('Your title must be between 30 and 50 characters').show();
        }
    });

Answer 1

Unfortunately, since blur and click are different events, you can’t use stopPropagation. The only way I can think to do this is to fake it. You can ignore the first click that happens within a fraction of a second of the blur event.

http://jsfiddle.net/LeNDp/1

var ignoreClicks = false;
var timer;

$("body").click(function() {
    if(!ignoreClicks){
        $("#msg").fadeOut();
    }else{
        if(timer) clearTimeout(timer);
        ignoreClicks = false;        
    }
});

$("input").blur(function(e) {
    ignoreClicks = true;      
    $("#msg").stop(true,true).show();

    if(timer) clearTimeout(timer);
    timer = setTimeout(function(){ignoreClicks=false;}, 250);
});​