Tab repeats function 6 times

[Thiago Jorge]

Hello Everyone!

I am trying to implement a form which some of the fields I have are
required.

In order to do that I am using the onBlur function, so when I either
click on a different field, or Tab out to the next field, it should
check if my last entry was not blank, and in case it was, it should
return to that field until the user enters a valid entry.

Here is my code:

-------------------------------------------------------------------------------------
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkInput(element,curentField) {
if (element.value == "" ) {
document.form1[curentField].focus();
alert("All fields with * are required!");
}
}
// -->
</SCRIPT>
<form name="form1" method="post" action="">
<INPUT TYPE="text" NAME="Name" VALUE="" size="17"
onBlur="checkInput(this,'Name')">
<input type="submit" name="Submit" value="Submit">
</form>
-------------------------------------------------------------------------------------

The problem I am having is, when I use the Tab to move to the next
field, the alert message pops up 6 times. If I click on some other
field or on the background using the mouse, then the alert message
shows up only once, like it should!

Any idea why the Tab causes 6 alerts and how can I do to change that?

Thanks,

Thiago

[RobG]

Thiago Jorge wrote:

Hello Everyone!

I am trying to implement a form which some of the fields I have are
required.

In order to do that I am using the onBlur function, so when I either
click on a different field, or Tab out to the next field, it should
check if my last entry was not blank, and in case it was, it should
return to that field until the user enters a valid entry.

That is a rather unfriendly feature. By all means alert the user to
invalid input, but use an in-page error message and do not force them
back to the input. They may know that their input is invalid but wish
to do something else before correcting it.

Here is my code:

-------------------------------------------------------------------------------------
<SCRIPT LANGUAGE="JavaScript">

The language attribute is deprecated, type is required.

<script type="text/javascript">

<!--

Do not use HTML comment delimiters inside script elements. They serve
no useful purpose and may cause problems.

function checkInput(element,curentField) {
if (element.value == "" ) {
document.form1[curentField].focus();

You already have a reference to the element, you could just use:

element.focus();

But...

alert("All fields with * are required!");

you have a timing issue: you put focus on the element, then call alert
so the input to loses focus, so the onblur event fires, which calls the
alert again, which fires onblur, and so on - your code causes Firefox
to stop responding. Maybe IE just gives up after half a dozen such
loops.

Using an in-page message and ditching the focus() call solves the
problem.

}
}
// -->
</SCRIPT>
<form name="form1" method="post" action="">
<INPUT TYPE="text" NAME="Name" VALUE="" size="17"

It is not a good idea to give any element a name of "Name" - as far as
the HTML specification is concerned, that is identical to "name". What
should I see when I do:

alert(document.forms['form1'].name);

onBlur="checkInput(this,'Name')">

There is no need to pass the name of the input, you already have a
reference to it with 'this', and could get it using 'this.name' or,
within the function, element.name if you wanted to.

<input type="submit" name="Submit" value="Submit">

As above, giving a submit button a name of submit is a bad idea, there
is no need for it to have a name at all.
--
Rob