onChange and onBlur events

Christoph · Oct 19, 2004

I'm trying to validate some HTML form elements when the
user tabs out of each element. However, I'm having some
problems.
It appears that the order of events is onChange followed
some time afterwards by onBlur. I believe this to be the
case because in my onChange script, if the validation fails,
I force focus back to the field element. However, the focus
still falls to the next field and not back to the field I tried to
force the focus to. So it seems to me that the browser is
actually tabbing out of the field only after the onChange
script runs.
Now, I can't just use onBlur because a part of my validation
is checking to make sure the field is not blank. So using
onBlur, when I tab out of a blank (or erroneous) field, it
creates an endless loop where to adjacent fields are triggering
their validation script when focus gets placed back to the
erroneous field.
So that brings me back to the onChange. Does anyone
know how I can keep focus on the erroneous field after
the onChange script fires? Because simply forcing focus
on the field doesn't seem to be working.

Thank you for your time and consideration.

thnx,
Christoph

Lee · Oct 19, 2004

Christoph said:

I'm trying to validate some HTML form elements when the
user tabs out of each element. However, I'm having some
problems.
It appears that the order of events is onChange followed
some time afterwards by onBlur. I believe this to be the
case because in my onChange script, if the validation fails,
I force focus back to the field element. However, the focus
still falls to the next field and not back to the field I tried to
force the focus to. So it seems to me that the browser is
actually tabbing out of the field only after the onChange
script runs.
Now, I can't just use onBlur because a part of my validation
is checking to make sure the field is not blank. So using
onBlur, when I tab out of a blank (or erroneous) field, it
creates an endless loop where to adjacent fields are triggering
their validation script when focus gets placed back to the
erroneous field.
So that brings me back to the onChange. Does anyone
know how I can keep focus on the erroneous field after
the onChange script fires? Because simply forcing focus
on the field doesn't seem to be working.

In general, I don't like it when the script moves my focus.
It's annoying and it's not going to guarantee correct input,
anyway, because if I type the same bad value twice, it has
not changed, so the onChange handler won't fire. That's not
enough reason to use onBlur, though because even if you work
around the looping problem, there are still too many things
that can cause a field to lose focus before the user is ready
to have the input validated. What it does mean is that you
should also validate onSubmit and, as always, on the server.

The following inserts a 1/10 second delay before setting the
focus back to the field that failed validation:

<html>
<head>
<title>demo</title>
<script type="text/javascript">
var globalTakeFocus=null;

function setFocus(ref) {
globalTakeFocus=ref;
setTimeout("globalTakeFocus.focus();globalTakeFocus.select()",100);
}

function validateField(ref) {
if (ref.value != "ok") {
alert("Value must be \"ok\"");
setFocus(ref);
}
}
</script>
</head>
<body>
<form>
<input onchange="validateField(this)"><br>
<input onchange="validateField(this)"><br>
<input onchange="validateField(this)">
</form>
</body>
</html>

Anomaly: onblur handling AND advice on validation	1	Jan 29, 2008
Alert and Input Control Events	7	Dec 29, 2011
Intercepting onchange()	1	Jul 30, 2008
onChange event and focus()	1	Feb 1, 2005
focus after onchange event and regex test not working	3	Feb 28, 2006
onblur function interrupting form submission	5	Feb 6, 2006
events get lost (from onBlur to onClick)	2	Oct 5, 2005
another newbie question - onblur / focus	9	Jun 4, 2005

onChange and onBlur events

Christoph

Lee

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads