...

View Full Version : Pls help me resolve javascript error - Onblur event goes in to endless loop



Chithra
08-13-2008, 04:29 AM
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

rangana
08-13-2008, 04:37 AM
How can we reproduce the endless loop?

Also, you might want to add highlighted here:


<tr><input type="submit" Name="submit" value="Submit"></tr>

Philip M
08-13-2008, 09:42 AM
function validText1(element) {
if (element.value.length == 0) {
alert("You need to type username");
element.focus();
return false;
}

Chithra
08-13-2008, 01:42 PM
Hi

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

Regards
chithra.

Chithra
08-13-2008, 01:50 PM
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

Philip M
08-13-2008, 03:54 PM
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.

Chithra
08-14-2008, 01:14 AM
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

Philip M
08-14-2008, 10:44 AM
The whole script needs re-writing. Your validation should take place when the form is submitted.


<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.

Chithra
08-14-2008, 08:15 PM
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.

Philip M
08-14-2008, 08:27 PM
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.


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().

Chithra
08-14-2008, 09:23 PM
Thank you so much for your clarification and it helped me out.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum