Blur events going to two textboxes

[tshad]

I have an event that uses a class selector for 10 textboxes.

I am checking to see if the value is numeric. If there is an error I am doing a this.focus() to go back to the textbox I just left. The problem is that end up getting 2 blur events.

For example, if I am on the 3rd textbox, enter a value then tab to the 4th textbox. This causes a blur on the 3rd textbox as well as the 4th checkbox when the focus goes back to the 3rd textbox.

How do I solve this problem?

   $(".numeric0").blur(function (event) {
      if (!isNumericOrBlank($(this).val(), 0))
      {
         $(this).parent().find('.validMessage').show();
         [highlight #FCE94F]this.focus();[/highlight]
      }
   });

Thanks,

Tom

 

[vacunita]

Unfortunately that's the way blurr works.

When the element loses focus for any reason blurr activates. Since you are re-focusing the previous element, the current one loses focus, and activates its own blurr.

Best bet is to not re-focus the previous element but simply point to it, or highlight it in some way so the user knows there was an error. Let the user click back in when they are ready to fix it.

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech

 

[tshad]

That's fine, but not how we want the behavior to work.

I did figure out a way to make it work by setting a global variable to tell it to not process anything if bluring is turned off.

Works perfect. This is similar to an issue I had with windows forms where you cannot prevent an event from firing but in some instance it will fire. So you set and unset a variable to allow the event to fire but you just don't do anything in the event code.

var focusOK = true;

$(".numeric0").blur(function (event) {
      if(focusOK)
      {
          if (!isNumericOrBlank($(this).val(), 0))
          {
             $(this).parent().find('.validMessage').show();

             focusOK = false;        // prevent blur code to work
             this.focus();
          }
       }
       else
       {
          focusOK = true;     // reset focusOK to allow blur code to work
       }
   });

This blur event is on all the textboxes in the group.

Thanks,

Tom