Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

Problem Using OnFocus and OnBlur Events with FireFox 2.x

FormFieldinator's Dirty Little Secret

Brian comments on FormFieldinator:

...I tried the [FormFieldinator] tester and found some problems. I'm using Firefox 2.0.0.14:

...I get an error message when I tab after pasting invalid text, but it moves to the next field anyway. Shouldn't it stay in that field until it's correct?

I have to admit, I was wondering when someone was going to call me out on this. If your not familiar with FormFieldinator, it was my attempt to create the ultimate JavaScript form and formfield utility library. I developed, what I thought, was a fairly robust set of tools to allow you to capture, validate and format form input. Heck, I even came up with a cool name.

What's the problem you ask? Well, I learned a long time ago, that performing any type of form validation should be done on the back-end. Quite frankly, front-end validation is a big pain-in-the-you-know-what and it causes way to many headaches. This particular problem lies within the doFormValidation script. It's supposed to check the field input after the field loses it's focus (i.e. when the user clicks or tabs out of the field). It works as expected in Safari and IE, but FireFox 2.x throws a hissy fit like you wouldn't believe.

It boils down to a Mozilla bug which you can read about here https://bugzilla.mozilla.org/show_bug.cgi?id=53118. In essense, FireFox isn't bubbling it's events properly. In our particular case, it's firing the onBlur event and then immediately firing the onFocus event. And if we use any kind of alert, prompt or confirm box, the field loses it's focus and the process starts all over again. Basically and endless loop of stupidness.

Iplayed around with the script that day, for about 5 hours. I tried everything from intercepting the keydown or keypress to see if it was a tab, created a timer to focus on the field after a certain amount of time and even tried canceling the event bubble. Nothing worked. I got frustrated. Wept out loud. Called mom. It was a sad, cloudy day at ye ole Juice factory.

So Brian, to answer your question, yeah I'm aware of the problem, but there's not much I can do. When a major browser has bugs that won't allow us web developers to do the things we want to do (in a nice cross-browser friendly way), then we are forced to find other solutions. And in this case, I highly recommend performing your validations on the server side or checking the data before the form is submitted.

Note: One of the reasons I kind of let this go, is because the W3C spec for form user interface, suggests that we do not prevent the user from doing what they want to do. In this case, it's tabbing or clicking out of a field focus. So essentially, alerting the user to the problem, and then allowing them to leave the field is more in line with what should happen. I don't personally agree with this philosophy, but because forms do not have the capability to validate data on their own, we are forced to come up with our own solutions based on whatever means are at our disposal.

[Update 6-27-2008]: I went ahead and created a version that will stop the user from using the TAB key to leave a formfield if it does not pass the doFormValidate test. This version works, but it doesn't show an alert. It just prevents the TAB key from being used. If you take a look at the code, you can uncomment a section to throw an alert to see the FireFox bug for yourself.
Warning! Uncommenting this section will make FireFox 2.x go into a stupid alert loop. You will have to force quit FireFox to stop it!