Tab repeats function 6 times

Discussion in 'Javascript' started by Thiago Jorge, Oct 12, 2006.

  1. Thiago Jorge

    Thiago Jorge Guest

    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
     
    Thiago Jorge, Oct 12, 2006
    #1
    1. Advertising

  2. Thiago Jorge

    RobG Guest

    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
     
    RobG, Oct 12, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. kj12345

    Refresh repeats last action

    kj12345, Sep 28, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    518
    Eliyahu Goldin
    Sep 29, 2004
  2. Mick
    Replies:
    1
    Views:
    725
    =?Utf-8?B?VGFtcGEgLk5FVCBLb2Rlcg==?=
    Nov 29, 2004
  3. Amelyan
    Replies:
    2
    Views:
    4,061
    clintonG
    Dec 19, 2005
  4. Replies:
    4
    Views:
    321
    Neil Cerutti
    Dec 7, 2005
  5. cate
    Replies:
    1
    Views:
    227
    Evertjan.
    Jun 14, 2010
Loading...

Share This Page