Cancel change of focus on blur, change, focusout

Page 1 of 1

5 Replies - 2669 Views - Last Post: 21 September 2012 - 08:26 AM

#1 BobRodes  Icon User is offline

  • Your Friendly Local Curmudgeon
  • member icon

Reputation: 551
  • View blog
  • Posts: 2,911
  • Joined: 19-May 09

Cancel change of focus on blur, change, focusout

Posted 24 January 2012 - 03:50 PM

I have some code that, when the user leaves an input box, checks for a valid date. If not, it sends an invalid date alert, wipes out the text, and resets the focus back to the box. Here's the code, after various simplifications: 
    $('#startDate').on('blur', function (event) {
         if (!isDate(event.target.value)) { //isDate is a validation function, works fine
            alert('Invalid Date');
            event.target.value = '';
//           setTimeout(function () {  //the horror...the horror...
                document.getElementById(event.target.id).focus();
//           }, 1);
//            event.preventDefault;
//            event.stopImmediatePropagation;
//            event.stopPropagation;
            return false;
        }
    });
The browser (FF 9.0.1) apparently executes the focus() method, and then happily goes and focuses wherever the user had planned to go. I'm reduced to the frightful hack of pausing for a millisecond before executing the focus method so whatever thread is changing the focus can finish doing so, thereby allowing me to change it back.

I have attempted using the change event as well, but that doesn't work either. Since it fires before blur, that's not surprising. I've tried all of the three commands I've commented out, with no luck.

Can someone give me a glimpse under the hood?

This post has been edited by BobRodes: 24 January 2012 - 03:52 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Cancel change of focus on blur, change, focusout

#2 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 745
  • View blog
  • Posts: 1,525
  • Joined: 30-January 09

Re: Cancel change of focus on blur, change, focusout

Posted 24 January 2012 - 04:58 PM

I can replicate your problem, and yes it's a doozy. Rather than go with blur (read: focusout) I tried with focusin instead. This may not be the way you want to go, but it works. PS I replaced your isDate() function with a simple string conditional, as isDate() it is a custom function that I couldn't replicate.
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<label>Date</label><input type="text" id="startDate">
<br>
<label>Dummy</label><input type="text" id="blurrer">
<script type="text/javascript">
    $('#blurrer').on('focusin', function (event) {
        if($('#startDate').val() != "a") {
			alert(123);
			$('#startDate').val("").focus();
		}
    });
</script>
</body>

Forgive the on-the-fly dodgy HTML.
Was This Post Helpful? 0
  • +
  • -

#3 BobRodes  Icon User is offline

  • Your Friendly Local Curmudgeon
  • member icon

Reputation: 551
  • View blog
  • Posts: 2,911
  • Joined: 19-May 09

Re: Cancel change of focus on blur, change, focusout

Posted 24 January 2012 - 07:15 PM

Update: I put a little test code together at home: 
	$("#dob").blur(function (event) {
		if (event.target.value != ''){
			alert('Invalid date');
			document.getElementById('dob').focus();
		}
	});
This has the same problem in FF, and works fine in both Safari and IE. e_i, thanks very much for going to the trouble. However, I'm looking to validate the date when the user leaves the input box, not when he enters it--I want to make sure that the input date is good before the user quits the box. Am I missing something?
Was This Post Helpful? 0
  • +
  • -

#4 BobRodes  Icon User is offline

  • Your Friendly Local Curmudgeon
  • member icon

Reputation: 551
  • View blog
  • Posts: 2,911
  • Joined: 19-May 09

Re: Cancel change of focus on blur, change, focusout

Posted 25 January 2012 - 08:00 AM

Update: the horrible setTimeout solution appears to be the accepted workaround. That said, I'm growing rapidly disillusioned with forcing focus during field-level validation in javascript/jquery. It seems to have pretty much the same problems that the VB6 and previous versions' LostFocus event had. I'm going to stick to a message label.
Was This Post Helpful? 0
  • +
  • -

#5 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 745
  • View blog
  • Posts: 1,525
  • Joined: 30-January 09

Re: Cancel change of focus on blur, change, focusout

Posted 25 January 2012 - 07:55 PM

Your frustrations are heard and understood, by me at least. I have foregone field-level validation in lieu of form-level validation. I have yet to work with dependant fields in my application, but when I do I'm sure I'll feel your pain a little closer to home :online2long:
Was This Post Helpful? 0
  • +
  • -

#6 BobRodes  Icon User is offline

  • Your Friendly Local Curmudgeon
  • member icon

Reputation: 551
  • View blog
  • Posts: 2,911
  • Joined: 19-May 09

Re: Cancel change of focus on blur, change, focusout

Posted 21 September 2012 - 08:26 AM

Going back over old stuff...the application requirement is similar to that of setting up a meeting date and time in Microsoft Outlook, just somewhat simplified. In other words, every time the user leaves a date or time box, we have to update the duration dropdown, and vice versa. I don't remember exactly what I did to solve it, but I will look it up when I'm able.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1