E
Emmes
Hi;
If this is not the proper place to ask these questions please accept
my apologies in advance and please let me know where the proper place
to ask these questions is.
First, it isn't necessary but I was interested in getting an opinion
from mozilla developers. Do they read this group? Like I said, it
doesn't matter just curious.
My company is using:
- Firefxo 2.0.0.11
- Internet Explorer 7.0.5730.11
- Windows XP Professional Service Pack 2
My company has a large web application that has been coded to IE,...
for years.
We are now trying to do the right thing by making our code work in
both the Mozilla family of browsers ( and get W3 compliance ) and
Internet Explorer.
We know it isn't the best/right way to do things, but our customers
specifically demand that our web application has large HTML forms
( sometimes 200 fields ) and that validation for each field takes
place as the user fills out each field. Additionally are users want
processing to happen the same whether or not the user likes to mouse
our keyboard through the forms via tabbing.
These customer mandated constraints and being cross browser compliant
are our only concerns. Whatever fills both sets of demands we are
happy to run with it. I would welcome any advice in this regard.
Our web application is currently doing javascript validation by
attaching javascript functions to the onblur event of each HTML field
on our large forms.
Our problem in going cross browser is that Internet Explorer and
Firefox handle onblur events in combination with form submission
differently.
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?
Thanks much in advance for any information or opinions.
Steve
=======================================================
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;
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>
If this is not the proper place to ask these questions please accept
my apologies in advance and please let me know where the proper place
to ask these questions is.
First, it isn't necessary but I was interested in getting an opinion
from mozilla developers. Do they read this group? Like I said, it
doesn't matter just curious.
My company is using:
- Firefxo 2.0.0.11
- Internet Explorer 7.0.5730.11
- Windows XP Professional Service Pack 2
My company has a large web application that has been coded to IE,...
for years.
We are now trying to do the right thing by making our code work in
both the Mozilla family of browsers ( and get W3 compliance ) and
Internet Explorer.
We know it isn't the best/right way to do things, but our customers
specifically demand that our web application has large HTML forms
( sometimes 200 fields ) and that validation for each field takes
place as the user fills out each field. Additionally are users want
processing to happen the same whether or not the user likes to mouse
our keyboard through the forms via tabbing.
These customer mandated constraints and being cross browser compliant
are our only concerns. Whatever fills both sets of demands we are
happy to run with it. I would welcome any advice in this regard.
Our web application is currently doing javascript validation by
attaching javascript functions to the onblur event of each HTML field
on our large forms.
Our problem in going cross browser is that Internet Explorer and
Firefox handle onblur events in combination with form submission
differently.
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?
Thanks much in advance for any information or opinions.
Steve
=======================================================
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;
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>