Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pls help me resolve javascript error - Onblur event goes in to endless loop

    Hi All am new to javascript programming,

    Please find below my code snippet.

    <html>
    <head>
    <title>Home Expenses </title>
    <script>

    function validText1(element) {
    if (element.value.length == 0) {
    alert("You need to type username");
    element.focus();

    }
    }

    function validText2(element) {
    if (element.value.length == 0) {
    alert("You need to type password");
    element.focus();

    }
    }
    </script>
    <style type="text/css">
    body {background-color: yellow}
    h1 {background-color: #00ff00}
    h2 {background-color: transparent}
    p {background-color: rgb(250,0,255)}
    </style>
    </head>
    <body>
    <form name="Login" method="POST" action="Login.do">
    <H1 align="center">Your Home Expenses </H1>
    <table>
    <td>
    <tr>UserName<input type="text" id="uname" Name="UserName" onBlur="validText1(this);"></tr>
    <tr>password<input type="password" id="pawd" Name="password" onBlur="validText2(this);"></tr>
    <tr><input type="submit" Name="submit" value"Submit"></tr>
    <tr><a href="">Forgot password</a></tr>
    <tr><a href="">Forgot UserID</a></tr>
    </td>
    </table>
    <table >
    NewUser <A HREF="newuser1.html">signin</A>
    </table>
    </form>
    </body>


    when i try run this code and try to validate the script,
    The alert message pops up for both username and password and goes in to an endless loop.
    to terminate this event, i had to kill page from task manager.
    Can any one please help me on this.

    Thanks in advance

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    How can we reproduce the endless loop?

    Also, you might want to add highlighted here:
    Code:
    <tr><input type="submit" Name="submit" value="Submit"></tr>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Code:
    function validText1(element) {
    if (element.value.length == 0) {
    alert("You need to type username");
    element.focus();
    return false;
    }

  • #4
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    I have tried the above mentioned code also, but still my javascript goes in to an endless loop

    Regards
    chithra.

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    <html>
    <head>
    <title>Home Expenses </title>
    <script>

    function validText1(element) {
    if (element.value.length == 0) {
    alert("You need to type username");
    element.focus();

    }
    }

    function validText2(element) {
    if (element.value.length == 0) {
    alert("You need to type password");
    element.focus();

    }
    }
    </script>

    <style type="text/css">
    body {background-color: yellow}
    h1 {background-color: #00ff00}
    h2 {background-color: transparent}
    p {background-color: rgb(250,0,255)}
    </style>
    </head>
    <body>
    <form name="Login" method="POST" action="Login.do">
    <H1 align="center">Your Home Expenses </H1>
    <table>
    <td>
    <tr>UserName<input type="text" id="uname" Name="UserName" onBlur="validText1(this);"></tr>
    <tr>password<input type="password" id="pawd" Name="password" onBlur="validText2(this);"></tr>

    <tr><input type="submit" Name="submit" value"Submit"></tr>
    <tr><a href="">Forgot password</a></tr>
    <tr><a href="">Forgot UserID</a></tr>
    </td>
    </table>
    <table >
    NewUser <A HREF="newuser1.html">signin</A>
    </table>
    </form>
    </body>


    The code marked in red are the places where the endless loop occurs.
    can you please help me resolve this

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    I do not understand what you mean by an endless loop. It seems to work fine for me.


    The code is defective as:-

    <tr>UserName<input type="text" id="uname" Name="UserName" onBlur="validText1(this);"></tr>
    <tr>password<input type="password" id="pawd" Name="password" onBlur="validText2(this);"></tr>

    calls the validation scripts onblur - but if the user does not fill in the textbox then there is no onblur event. The validation as to whether the boxes have been filled in at all should be called by the submit button, and the individual textbox validations should check onblur that whatever has been entered is sensible, e.g. a name cannot contain numbers, not all spaces etc.

  • #7
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    When i press tab from the "Username" textbox, without entering any values in the textbox. The alert message for both "username" and "password" is called and alert pop up in a endless loop. The IE also hangs up, only with task manager i could kill the screen.

    Regards
    Chithra

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    The whole script needs re-writing. Your validation should take place when the form is submitted.
    Code:
    <html>
    <head>
    <title>Home Expenses </title>
    <script>
    
    function validText() {
    if (document.Login.UserName.value.length == 0) {  // note that a single space will pass the test
    alert("You need to type username");
    document.Login.UserName.focus();
    return false;
    }
    
    if (document.Login.password.value.length == 0) {  // note tht a single space will pass the test
    alert("You need to type password");
    document.Login.password.focus();
    return false;
    }
    }
    </script>
    
    
    <style type="text/css">
    body {background-color: yellow}
    h1 {background-color: #00ff00}
    h2 {background-color: transparent}
    p {background-color: rgb(250,0,255)}
    </style>
    </head>
    <body>
    <form name="Login" method="POST" action="Login.do">
    <H1 align="center">Your Home Expenses </H1>
    <table>
    <td>
    <tr>UserName<input type="text" id="uname" Name="UserName" ></tr>
    <tr>password<input type="password" id="pawd" Name="password"></tr>
    <tr><input type="submit" Name="submit" value"Submit" onclick = "return validText()"></tr>
    <tr><a href="">Forgot password</a></tr>
    <tr><a href="">Forgot UserID</a></tr>
    </td>
    </table>
    <table >
    NewUser <A HREF="newuser1.html">signin</A>
    </table>
    </form>
    </body>
    
    </html>
    "Come and catch up with your camp friends and introduce new families to the wonders of a Miniwanca summer"
    American Youth Foundation, Cleveland area Miniwanca party.
    Last edited by Philip M; 08-14-2008 at 09:47 AM.

  • #9
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks this code works.

    This is out of my curiosity, is it that there is no way to implement the onblur() event in individual fields for validations.

    Regards
    Chithra.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Yes, of course you can. But it should be used to validate an actual entry. It makes no sense to test for an empty field using onblur() or onchange() as the script will never be called.

    Code:
    UserName<input type = "text" id = "uname" Name = "UserName" onblur = "chkname(this)">
    
    <script type = "text/javascript">
    function chkname(which) {
    var n = which.value;
    n = n.replace(/^\s+/,"");  // strip leading spaces
    if (n.length < 6) {   // name must have at least six characters
    alert ("Invalid");
    return false;
    }
    }
    </script>
    Separate validation is needed onsubmit() to check that the field is not empty.

    I should say that your endless loop is caused by an obscure bug in IE which moves the focus to the next field too rapidly. It can be overcome by introducing a short delay (100ms) with setTimeout().
    Last edited by Philip M; 08-14-2008 at 07:33 PM. Reason: Explain endless loop

  • #11
    New Coder
    Join Date
    Aug 2008
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much for your clarification and it helped me out.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •