By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,937 Members | 1,411 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,937 IT Pros & Developers. It's quick & easy.

Tab repeats function 6 times

P: n/a
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

Oct 11 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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

Oct 12 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.