jQuery form validation and control

[JBellTek]

I have been assigned the task of forcing a linear progression through a form using JavaScript. I am trying to use jQuery to do this. My example here is supposed to validate a field on blur, and if it is not valid then display the error message and return focus to the field.

This code does precisely what I want it to:

     // Validate fields on page blur, even directly following page load.
     $("input").blur(function() {
         var validdd = $(this).valid();
         if (validdd != 1) {
              $(this).focus();
         }
     });

However, it only performs correctly in Chrome. In Firefox and Internet Explorer, it does not force focus back on the field correctly.

How can I write this to evoke the correct response to invalid data in all three browsers (Chrome, Firefox, and Internet Explorer)? I began using jQuery with the understanding that the code should work the same anywhere.

 

[BillyRayPreachersSon]

Past experience tells me that wrapping the focus call in a timer might be the way to go, e.g:

if (validdd != 1) {
   var me = this;
   setTimeout(function() {
      $(me).focus();
   }, 250);
}

I've not tested this, but I've had similar problems resolved with this method.

If it works, you can probably drop the timer value right down to 50 (or possibly even 10, 1 or 0).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[JBellTek]

BillyRayPreachersSon:

Good call. It appears to work correctly in FireFox using the timer. It slows IE down enough to be able to watch focus going back and forth between the field tabbed out of and the field tabbed into.