Question

I doing a field validation using jquery to check if it is empty. If it is I want to display a message and then refocus on the field so the user can enter some data. Code:

$('#fieldId').blur(function() {
    var fieldValue = $(this).val();
    if(fieldValue == null || fieldValue.length == 0) {
        $(this).addClass('error');
        // show error message
        $('#errorDivId')
            .text('You must enter a value in this field')
            .show();
        $(this).focus();
    }
    else {
        if ($(this).is('.error')) {
            $(this.removeClass('error');
            $('#errorDivId').hide()
        }
    }
});

It sort of works but it moves the cursor to the next field and not the one I refocused on.

Answer 1

You can try this:

$('#fieldId').blur(function(evt) {
  var fieldValue = $(this).val();
  if(fieldValue == null || fieldValue.length == 0) {
    $(this).addClass('error');
    // show error message
    $('#errorDivId')
        .text('You must enter a value in this field')
        .show();
    this.focus();
    evt.preventDefault();
  }
  else {
    if ($(this).is('.error')) {
        $(this.removeClass('error');
        $('#errorDivId').hide()
    }
  }
});

However that may not completely solve the problem, as some browsers might be confused. As an alternative, wrap your “focus” call up as a timeout and run it after the current event finishes:

    var self = this;
    setTimeout(function() { self.focus(); }, 1);

It’s kind-of a hack but it should also work.

edit — @Gus is right about which “focus()” to call