I have an ASPX web form. I use jQuery to simply my Javascript. I use a Javascript validation script to validate each of the form fields' values. If an error occurs, I popup an alert with an error message. Then I transfer focus to the underlying element.

Here are examples I have tried.

Using jQuery:

var Form_FieldDef = function(name) {
    this.name = name;
    this.SetFocus = function() {
        $('#' + this.name)[0].focus();
    }
    this.Validate = function() {
        var isvalid = true;
        if ( $.trim($('#' + this.name).val()) == '') {
            alert("Your entry is empty");
            this.SetFocus();
            isvalid = false;
        }
        return isvalid;
    }
}

This works on IE7, IE8, Opera, Chrome, and Firefox. It does not work on Safari 4 on PC. I don't have a Mac.

So I changed the SetFocus method to this.

this.SetFocus = function() {
    var fld = document.getElementById(this.name);
    if (fld != null)
        fld.focus();
}

This works on IE7, IE8, Opera, Chrome, and Firefox. It does not work on Safari 4 on PC.

I stepped through the code with VS 2008 debugger, and I'm calling the focus method on the underlying element.