Pausing event listeners?

JavaScript
1

I have been toying around with a PURE JAVASCRIPT ( not jQuery) script that validates form inputs when the user presses <enter>.
‘onload’, the script attaches an “onkeyup” event listeners to all the relevant inputs, so that the actions can run unobtrusively . It checks for the key stroke, if it’s <enter> , it runs the validation function.

So far so good.

The problem is, I would like to use an alert() to deliver my validation message but if the user hits <enter> to close the alert window… this too is registered as a keystroke on the field, so of course the alert immediately pops up again; the only way to close the alert window is to use the mouse to click on “close”, and that’s not very user friendly.

I used this.blur() so as to ‘deafen’ the event listener temporarily ( or thus was my intent). Of course the problem with that is that when the user closes the window the field is no longer highlighted ( doesn’t have focus) and that isn’t very user friendly either.

I tried this which just put me back to where I was before, but I will admit it was grasping at straws:


				 function keyPressCheck(e,args){
				  if (e.keyCode==13){
				  	this.blur();
				  	v=checkField(this.value);
				  	alert(v);
					this.focus();
  				  }
  				}

So my question is, is there a way to ‘pause’ a listener or make it so that it’s not active when an alert window is up?

2

Wouldn’t the same effect be achieved much more easily, and without the complexity, just by attaching an event on to the form submit event?


form.onsubmit = function (evt) {
    var isValid = true;
    ...

    return isValid;
}

You can use document.activeElement to obtain the currently active field, for example.

3

Sorry I should have commented my code. The provided function merely controls WHEN the validation is triggered; When <enter >is pressed call the validation function, checkField. checkField returns false if it passes val, and a message pertaining to the error if it doesn’t.

Wouldn’t the same effect be achieved much more easily, and without the complexity, just by attaching an event on to the form submit event?

I want the validation to occur when field is filled, ( so one field at a time, when <enter> ( I may add <tab> latter) is pressed).
The problem am having is really with the alert() tho.

pressing <return> to close the alert window, acts as if you have pressed return on the field begin validated. Thus it’s a virtual infinite loop.

You can use document.activeElement to obtain the currently active field, for example.

so how would I do this while the alert window is up? the problem seems to be that the script continues to operate even while he alert is up. So, even if I take focus away from the active field, accomplished easily enough, I want to be able to return focus to the same element when the alert window is closed.

4

That seems to be a simple problem with an easy solution - remove the onkeyup and enter checking, and use the onchange event on the fields instead. That is the best way to perform what it seems that you want to do.

5

Holly crap it’s Saturday at 5pm, but I must be sleepy… and still you beat me to the punch… lol

As you just suggested, I went back not keyPressCheck(), but to the function am using to attach event listeners and I attached ‘onkeypress’ instead of ‘onkeyup’( it also worked with ‘onkeydown’ and ‘blur’) and it worked as expected , even without the convoluted mechanism I used in my OP.

But you are right tho. ‘onchange’ seems to be the most logical event to use to achieve this. Thank Paul!

6

You’re welcome.

It’s time like this that I’m reminded of the following quote:
“Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.” --Brian Kernighan

So rephrasing that in a better light, not only does writing our code in a simple and clear manner help us to debug it more effectively, but it also makes it easier for us and others to understand our code too.