JQuery Validation Problem

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.

Pointy · Accepted Answer · 2010-10-11 17:09:34Z

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

Gus · Accepted Answer · 2010-10-11 17:07:25Z

The blur event is triggered during a focus change (as the control you are validating loses focus). This could cause weird behaviour if you try to alter the focus while it is already changing. Instead of blur, try attaching the validation to the change event.

Also, there's no need to call the jQuery version of focus: $(this).focus(), you can just call this.focus().

$('#fieldId').change(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() 
        } 
    }
});

Collectives™ on Stack Overflow

JQuery Validation Problem

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related