Closed
Bug 414634
Opened 17 years ago
Closed 15 years ago
Javascript: Faulty onblur processing
Categories
(Firefox :: General, defect)
Tracking
()
RESOLVED
INCOMPLETE
People
(Reporter: emmes2705, Unassigned)
Details
(Whiteboard: [CLOSEME 2010-07-30])
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
My company is using:
- Firefxo 2.0.0.11
- Internet Explorer 7.0.5730.11
- Windows XP Professional Service Pack 2
Internet Explorer and Firefox handle onblur events in combination with form submission differently and FF seems to be getting caught in an infinite loop
I'm pasting two SMALL example HTML files into this message. I realize it may get messy so I am separating each example HTML file with a "====" line so anyone interested can copy out the code in between the "====" lines and paste it into a text editor.
In the first example HTML file we have a text field and a submit button.
The text field has a validation function connected to the onblur event to go execute when when someone leaves the text field.
In IE if the user mouses out of the text field and clicks the submit button the onblur processing will fire first and the form will not submit until that processing is done. This is what we need and want to happen in FF as well.
However, in FF if the user mouses out of the text field then clicks submit form submission and onblur processing will happen simultaneously ( or submission happens first ).
We also noticed that if the user moves focus off of the prompt box ( or an alert ) and then tries to make it go away, it won't. FF seems to be caught in a loop.
In the second example HTML file pasted into this message we came up with a work around to make FF behave like IE. We get around the loop problem by having onblur processing going to the onchange handler. We then add further process to the onchange handler to set a flag for submission to "false" until we are read to submit.
We want to make our web application Mozilla compliant in the most intelligent way we can while keeping with our customer's demands that each field is validated __as the field is filled in__.
Can anyone suggest a more intelligent way, than our workaround to do validation of large HTML forms ( 200 plus fields ) and/or get around the loop problem of the onblur event?
=======================================================
Example 1: HTML file to copy and paste: The problem
=======================================================
<html>
<head>
<title>Demonstrate different onblur event handling, FF vs IE </title>
<script>
<!--
function procApple()
{
alert("processing procApple(): ");
var typeApple = document.form1.apple.value;
if(typeApple != 'gala')
{
prompt("I only eat Gala Apples, please type \"gala\"","");
return false;
}
return true;
}
//-->
</script>
</head>
<body background = "white">
<form name = "form1" action = "http://www.google.com">
Name a type of Apple:
<input type = "text" id = "apple" name = "apple" onBlur="procApple()">
<br>
<br>
<input type = "submit" name = "submitButton" value = "submit">
</form>
</body>
</html>
=======================================================
Example 2: HTML file to copy and paste: Our workaround
=======================================================
<html>
<head>
<title>Test differences in onblur processing FF vs IE</title>
<script>
<!--
// Global variables
var formSubmitAllowed = true; // Allow the form to be submitted?
//-----------------------------------------------------------------------------
// Provide validation of a field IMMEDIATELY after a user leaves it
function procApple()
{
//alert("processing procApple()");
var typeApple = document.form1.apple.value;
if ( typeApple != 'gala' )
{
prompt("I only eat Gala Apples, please give me a Gala","");
return false;
}
return true;
}
//-----------------------------------------------------------------------------
// Sumbit the form, go to another URL ( google )
function wsubmit()
{
document.form1.action = "http://www.google.com/";
document.form1.method = 'post';
document.form1.submit();
return false;
}
//-----------------------------------------------------------------------------
// To be excuted AFTER HTML elements have had a chance to be rendered to the
// page
function overrideEvents()
{
var formElement; // holder
// For each HTML form element
for ( var i=0; i < document.form1.elements.length; i++ )
{
formElement = document.form1.elements[i];
if ( formElement.type == 'text' )
{
formElement.onchange = formElement.onblur
formElement.onblur = '';
formElement.oldchange = formElement.onchange;
formElement.onchange = newchange;
}
else if ( formElement.type == 'button' )
{
formElement.oldclick = formElement.onclick;
formElement.onclick = newclick;
}
}
}
//----------------------------------------------------------------------------
function newchange ()
{
// Note1 - srussell: If an alert() comes before the flag for submission
// is set to false, the chain of processing will be disrupted and the
// form will submit anyway.
// alert("processing newchange() before \"formSubmitAllowed = false;\"" +
// "\nThis will break proper processing");
formSubmitAllowed = false;
//alert("processing newchange() ");
this.oldchange();
formSubmitAllowed = true;
}
//----------------------------------------------------------------------------
function newclick()
{
// call real submit function
if ( formSubmitAllowed )
{
this.oldclick();
}
}
//-----------------------------------------------------------------------------
//-->
</script>
</head>
<body background = "white">
<form name = "form1" action = "" >
Name a type of apple ( must be Gala ):
<input type = "text" id = "apple" name = "apple" onBlur="procApple()">
<br>
<br>
<input type = "button" id = "submitButton" name = "submitButton" value = "submit" onclick = "wsubmit();" >
</form>
<script>
<!--
// Set up custom javascript event handling AFTER all of the HTML elements
// have had a chance to render ( big form, dynamically writting HTML with JS,
// etc...
overrideEvents();
-->
</script>
</body>
</html>
Reproducible: Always
Steps to Reproduce:
Please see the detailed description above for a description on how to see the problem
Actual Results:
Please see the detailed description above
Expected Results:
Please see the detailed description above
|
||
Comment 1•15 years ago
|
||
This bug was originally reported on Firefox 2.x or older, which is no longer supported and will not be receiving any more updates. I strongly suggest that you update to Firefox 3.6.6 or later, update your plugins (flash, adobe, etc.), and retest in a new profile. If you still see the issue with the updated Firefox, please post here. Otherwise, please close as RESOLVED > WORKSFORME
http://www.mozilla.com
http://support.mozilla.com/kb/Managing+profiles
http://support.mozilla.com/kb/Safe+mode
Whiteboard: [CLOSEME 2010-07-30]
Version: unspecified → 2.0 Branch
|
|
||
Comment 2•15 years ago
|
||
No reply, INCOMPLETE. Please retest with Firefox 3.6.8 or later and a new profile (http://support.mozilla.com/kb/Managing+profiles). If you continue to see this issue with the newest firefox and a new profile, then please comment on this bug.
Status: UNCONFIRMED → RESOLVED
Closed: 15 years ago
Resolution: --- → INCOMPLETE
You need to log in
before you can comment on or make changes to this bug.
Description
•