top.close closes the window before responding to alert in child frame

I am encountering a problem where I have a window and there are three
frames, one in the left, right and in the bottom. The bottom most frame has
common submit buttons. There are several tabs in left frame. Each one loads
a different form on the right frame. After fetching the contents of the form
from user, I am validating the text fields in the form using onChange() event
handler. After entering the text value in the textbox, if I press Submit
directly, the "Submit" as well as the validation routine happens concurrently.
Only at the end of validation, the field is marked as dirty. Now, if field is not
marked dirty, the Submit function will close the window without actually
submitting as nothing was changed. So when an invalid value is entered and
the Submit is pressed directly, an alert pops up temporarily but the close()
call from the parent frame immediately closes the alert window before user
can respond. This problem does not occur in IE as in IE, unless the alert
window is responded, the close() call cannot close the alert window. For eg:

For eg:

My left frame contains something like this:

var isDirty=0;

function doSubmit(){

if (!isDirty)
top.close;
}

document.Taskform.submit();

return;

}

In the right frame I have function handleInput() which is called using onChange event handler.

function markDirty(){
top.frameHead.isDirty=1;
}

function handleInput(){
storeInput["InputA"] = document.TaskForm["inputA"];

if(isInteger(input) == false)
{
window.alert("Number is not an integer !!!");
return false;
}
return true;

markDirty();
}

Now if I enter an invalid value in the text element and press submit directly instead of accessing any other form element, then doSubmit() as well as handleInput()get trigerred and run concurrently. The onChange event triggers
the alert for the invalid value, but since dirty field is not yet set at that instant, the top.close closes the alert. So the alert just pops up and immediately gets closed. This behavior is in Firefox as well as Mozilla but not in IE. In IE, the alert function is modal across ALL windows i.e., ALL processing ceases until the user clicks the OK button in the alert window.

Firefox/Mozilla however is NOT modal across all windows BUT only within the
current window.

ie.

With Firefox / Mozilla:

If a window is opened, and some javascript within the HTML file being
loaded into that new window, calls alert(), this will popup an alert
box. However, if the parent of the new window, attempts to close it's
child window, then the alert is automatically dismissed, and the
window closed.

Can you experts please let me know how I can approach this problem ?

Thanks.

I am validating the text fields in the form using onChange() event
handler.

Usually, the validation is done using onsubmit event placed in the form tag.

Hi Kor,

Thanks for your response. I have included some html files with a test case
to highligh this problem. In the attached zip file, if you open the index.html,
you will see a form on the right frame. If you type an invalid integer and
directly press Submit button, the alert will appear for a very short while and
close. If you repeat the same in IE, it will not close the alert call.

Appreciate your help. Could this be a bug in mozilla/firefox ?

Thanks.

You have mixted the actions, in my oppinion. In fact Mozilla is right. You ask for an alert onchange, same time you ask for a close() when clicking the button. So that Moz takes the actions like that: first it opens an alert on the parent page, than trigger the close() action from within the frame and open the parent, that means the action is triggered from another page, which is correct, in my oppinion.

To correct somehow that I guess that u should use onkeyup instead of onchange.

Anyway, the validator is not so good, would you like to have a better one, based on regexp?

I forgot to tell you why onkeyup is better. onchange event will trigger the function only onblur, that means only when the textfield looses the focus....

Hi Kor,

onkeyup sounds great. But how do I use it in a way that after it gets triggered after I type in the last character in the text field ?

For eg:

In this example:
<html>
<body>
<form action="" method="POST" id="myForm">
<input type="text" name="myText" onKeyUp="changeVal()">

<script type="text/javascript" language="JavaScript">
s1 = new String(myForm.myText.value)

function changeVal() {
s1 = "You released a key"
myForm.myText.value = s1.toUpperCase()
}

</script>
</form>
</body>
</html>

The moment I type first character, onkeyup is fired. If I had to validate character by character, would it be a good way to approach this problem ?

Btw, the validator is not great, I just came up with it for the test case. I would
defiinitely be interested in the regexp based validator.

Thanks.

Some regexp examples:
alpha numeric validator:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/JavaScript">
function valid(f) {
var re = /^[A-z]*$/;
if (!re.test(f.value)) {
alert("Only alpha numeric characters allowed!");
f.value = f.value.replace(/[^A-z]/g,"");
}
}
</script>
</head>
<body>
<input name="" type="text" onkeyup="valid(this)">
</body>
</html>

Numeric validator

<script type="text/JavaScript">
function valid(f) {
var re = /^[0-9]*$/;
if (!re.test(f.value)) {
alert("Only numbers allowed!");
f.value = f.value.replace(/[^0-9]/g,"");
}
}
</script>

Thanks Kor. That was very useful.