Question

I have a radiobuttonlist; when item[1] is clicked a textbox is displayed and my custom jQuery validator is bound to the textbox onblur event. Here’s a pared down version of my validator:

function AddMyValidator() {
    $("input[id$='myTxt']").blur(function(e) {
        var val = this.value.replace(" ", "");
        if (val.length == 0) {
            //need to determine firing control here and show error message if not parent radiobuttonlist.item[0]
            this.focus();
            $("span[id$='myError']").html("<span style='color:red;'>Error!</span>").show().animate({ opacity: 1.0 }, 3000).fadeOut("slow");
            return false;
        }
        return true;
    });
}

I would like to be able to determine if the blur event was fired by item[0], and only display my error message when it is not. Any suggestions would be greatly appreciated.

Answer 1

I ended up finding the answer here

When onblur occurs, how can I find out which element focus went *to*?

This is essentially what I ended up with..

function AddMyValidator() { 
$("input[id$='myTxt']").blur(function(e) { 
    var val = this.value.replace(" ", ""); 
    if (val.length == 0) { 
        var target = e.explicitOriginalTarget || document.activeElement;
        if (!target.id.endsWith("myRadioButtonList_0")){
            this.focus(); 
            $("span[id$='myError']").html("<span style='color:red;'>Error!</span>").show().animate({ opacity: 1.0 }, 3000).fadeOut("slow"); 
            return false; 
        }
    } 
    return true; 
}); 

}

Thanks.

PS. This works fine in IE8, but not in Firefox 3.6. It seems that explicitOriginalTarget is no longer supported by Firefox. I’m still looking for a good cross-browser way of doing this.