Closed
Bug 271421
Opened 21 years ago
Closed 20 years ago
JavaScript Event handler issue, onchange and onblur events on form fields cannot stop the "default" event from firing.
Categories
(Firefox :: General, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: mrwns, Assigned: bugzilla)
References
()
Details
Attachments
(1 file)
|
14.46 KB,
text/html
|
Details |
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
We use onchange for data validation in forms. The idea is that the user can't
leave the field until the data is correct. As such, we do a return false in the
onChange handler for the form field, so the default action (change of focus to
the next item in a tab or click) is suppressed. This works in IE. (I realize
this doesn't say much)
I've tried to replicate the behavior in Firefox. When I do a return false in
onBlur or onChange, it appears to have no effect. Regardless of what I put in
the onChange handler (including an explicit this.focus()), once it completes the
focus moves to the next element in the form. I've tried using stopPropagation
methods, preventDefault, and cancelBubble, but none have any effect. It seems
tab cannot be trapped with an onKeyDown event either. This is the first problem.
With an onChange return of false, the focus should not leave the original field.
When it does, the onChange is then reset, which means even if I return to the
field, if I leave this time, the data is no longer different from when I focused
on the field, so the onChange handler won't even fire this time. This is the
second problem.
I'd like to think that a fix for first problem will also fix the second. This
type of behavior is critical for web based applications.
Reproducible: Always
Steps to Reproduce:
1. Go to the URL I've supplied.
(https://mgmt.k12system.com/~mrwizard/firefox_js.html)
2. Focus on the validation field, and enter some data. (anything will do)
3. Hit tab, or click away.
Actual Results:
Notice you're now in the Something to Receive Focus field, and the focus2 event
has fired.
Expected Results:
Focus should have remained in the validation field.
Appears to be related to Mozilla Classic bugs of 243816, 53579, 65581... None of
which seem to have a resolution. I think the problem is in the "stacking" of
events, the focus should not change. The other problem I notice is that the
onBlur happens before the onChange, so we've already left the field. If I could
move the validation to the onBlur I would, but return false has no effect there
either. (notice the return false in the onBlur of the validation field)
|
||
Comment 1•21 years ago
|
||
Might be ralated somehow with 263873 and 267675 , tested and confirmed on
Windows 2000 SP3 with Firefox 1.0 RC1.
(In reply to comment #1)
> Might be ralated somehow with 263873 and 267675 , tested and confirmed on
> Windows 2000 SP3 with Firefox 1.0 RC1.
Using onChange in javascript to validate form field entry. object.focus() is not
putting the focus on a failed (false) validation. This works in IE...Am using
FireFox 1.0
Cut, paste and try the following:
<html>
<head>
<script language="JavaScript1.2">
function checkDate(dt) {
var myRegex = new regExp("^([0][0-9]|[1][0-2])\/([0-2][0-9]|[3][0-1])\/[0-9]{2}$");
if (dt.value.match(myRegex))
{//valid date format, check for valid date
var theYear = Math.round(dt.value.substr(6,2));
var theMonth = Math.round(dt.value.substr(0,2));
var theDay = Math.round(dt.value.substr(3,2));
if ((theYear%2 == 0) && (theDay > 29) && (theMonth == 2)) {
alert ("Not a valid date.");
return false;
}
else if ((theYear%2 != 0) && (theDay > 28) && (theMonth == 2)) {
alert ("Not a valid date.");
return false;
}
else if ((theDay > 30) && (theMonth == 4 || theMonth == 6 || theMonth == 0 ||
theMonth == 11)) {
alert ("Not a valid date.");
return false;
}
else {
return true;
}
}
else
{
alert ("Date not in correct mm/dd/yy format.");
dt.focus();
return false;
}
}
</script>
<body>
<form name="theForm">
>
<input type="text" id="dt" name="date" onChange="return checkDate(this);">
<input type="text" id="dt" name="date2" onChange="return checkDate(this);">
<input type="submit">
</form>
</head>
</html>
|
||
Comment 3•20 years ago
|
||
I'm not sure, but add other testcase
OS: win2k
FF 1.0.2
<script language="JavaScript1.4" type="text/javascript">
checkEmpty = function(obj){
if(obj.value ==""){
alert("Please fill in this field");
obj.focus();
}else{
alert(ob.value);
};
}
</script>
<input type="text" onchange="checkEmpty(this)">
If use keyboard only, all is ok.
But if you cut via mouse text and leave textfield FF report the error - obj not
found.
|
||
Comment 4•20 years ago
|
||
I'm having a similar problem, however I have one way that works and one that
doesn't. See the following attachment
|
|
||
Comment 5•20 years ago
|
||
here's the file
|
|
||
Comment 6•20 years ago
|
||
Comment on attachment 189321 [details]
a timecard form
if you enter a letter in one of the hours fields, then move to another field
the focus should remain with the field with the error. It doesn't. Now hit
the save button, the focus is placed on the appropriate field.
|
||
Comment 7•20 years ago
|
||
according to
http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-eventgroupings-htmlevents
blur and change events are not cancellable
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•