Javascript problem

ASP Free Forums Sponsor:

June 2nd, 2004, 12:48 PM

Sweety_oh

Registered User

Join Date: Apr 2004

Posts: 23

Time spent in forums: < 1 sec
Reputation Power: 0

Javascript problem

Hi I am having problem with the javascript functions. If i am not entering name or any other mandatory field's value it gives a message but then goes to the asp page and registers the user. But the password validation is not working.

My code is as follows.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Registration Form for New User</title>
<style type="text/css">

</style>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function validate()
{
if ( isName() && isDept() && isBuild() && isEmail() && isPhone())
{
document.forms[0].submit();
}
return true;
}
//Name validator
function isName()
{
var str = document.forms[0].username.value;
if (str == "")
{
alert("\nThe Name field is blank .\n\nPlease re-enter your Name.")

document.forms[0].username.focus();
return false;
}
if((str.substring(0,1)<"a" || str.substring(0,1)>"z") && (str.substring(0,1)<"A" || str.substring(0,1)>"Z"))
{
alert("The Name should begin with an alphabetic character.");
document.forms[0].username.select();
return false;
}
for (var i = 1; i < str.length; i++)
{
var ch = str.substring(i, i + 1);
if ( ((ch < "a" || "z" < ch) && (ch < "A" || "Z" < ch)) && (ch < "0" || "9" < ch) && (ch != ''))
{
alert("\nThe Name field accepts letters,numbers & underscore only.\n\nPlease re-enter your Name.");
document.forms[0].username.select();
document.forms[0].username.focus();
return false;
}
}

return true;
}
// Department Validator
function isDept()
{
var str = document.forms[0].department.value;
if (str == "")
{
alert("\nThe Department field is blank .\n\nPlease re-enter your Department.")
document.forms[0].department.select();
document.forms[0].department.focus();
return false;
}

return true;
}
// Building Validator
function isBuild()
{
var str = document.forms[0].building.value;
if (str == "")
{
alert("\nThe Building field is blank .\n\nPlease re-enter your Building.")
document.forms[0].building.select();
document.forms[0].building.focus();
return false;
}

return true;
}

// Email Address Validator
function isEmail()
{
var str = document.forms[0].email.value;
if (str == "")
{
alert("\nThe Email Address field is blank .\n\nPlease re-enter your Email Address.")
document.forms[0].email.select();
document.forms[0].email.focus();
return false;
}

return true;
}

// Phone Validator
function isPhone()
{
var str = document.forms[0].phone.value;
if (str == "")
{
alert("\nThe Phone field is blank .\n\nPlease re-enter your Phone Number.")
document.forms[0].phone.select();
document.forms[0].phone.focus();
return false;
}

return true;
}

// Password Validator
function isPass(new_user)
{
var str = document.new_user.password.value;
if ((str == "") || (str.length < 6))
{
alert("\nThe PASSWORD field is either empty or less than 6 characters.\n\nPlease re-enter your Password.")
document.new_user.password.focus();

return false;
}
var str1 = document.new_user.password1.value;
if (str != str1)
{
alert("Passwords typed do not match, please re-enter your passwords.\n\n");
document.new_user.password.select();
document.new_user.password.focus();
document.new_user.password1.select();
document.new_user.password1.focus();
return false;
}
return true;
}

</SCRIPT>
</head>
<body onLoad="window.document.new_user.username.focus();" >
<center>
<form name="new_user" method="post" action="new_user.asp">

<table width="395" border="0" align="center" cellpadding="0.5" cellspacing="0.5">
<tr>
<td width="391"><h1 align="center" class="style1"><img src="register.gif" height=100 width=150></h1>
<br>
<br>
<h4 align="center"><font color="red"><b>All fields marked with * are compulsory </b></font></h4>
<table name="userdetails" align="center" cellspacing=5 cellpadding=5>
<tr align="left">
<td><span class="style2">Username:</span></td>
<td><input type="text" name="username"><font color="red">*</font></td>
</tr>
<tr align="left">
<td><span class="style2">Password:</span></td>
<td><input type="password" name="userpassword"><font color="red">*</font></td>
</tr>
<tr align="left">
<td><span class="style2">Retype Password:</span></td>
<td><input type="password" name="userpassword1" onblur="ispass(new_user)"><font color="red">*</font></td>
</tr>
<tr align="left">
<td><span class="style2">Room Number:</span></td>
<td><input type="text" name="roomno"></td>
</tr>
<tr align="left">
<td><span class="style2">Department:</span></td>
<td><input type="text" name="department"><font color="red">*</font></td>
</tr>
<tr align="left">
<td><span class="style2">Building:</span></td>
<td><input type="text" name="building"><font color="red">*</font></td>
</tr>
<tr align="left">
<td><span class="style2">E-mail:</span></td>
<td><input type="text" name="email"><font color="red">*</font></td>
</tr>
<tr align="left">
<td><span class="style2">Phone Number:</span></td>
<td><input type="text" name="phone"><font color="red">*</font></td>
</tr>
</table>
<p><br>
<br>
<input type="submit" align="absmiddle" value="REGISTER ME" onclick="validate()">
<input type="reset" align="absmiddle" value="CLEAR FORM">
</p>
<p>  </p></td>
</tr>
</table>
<br>
</form>
</center>
<br>
<br>
</body>
</html>

June 3rd, 2004, 03:30 PM

kbogart

Contributing User

Join Date: May 2004

Location: Cincinnati, OH

Posts: 550

Time spent in forums: 4 h 27 m 30 sec
Reputation Power: 5

Javascript gets confused and posts the form when it shouldn't. I have always done this workaround.

- Take the action value out of the <form> statement:
<form name="new_user" method="post" action="new_user.asp">

- Change the Submit button to a "button" type with:
<input type="submit" align="absmiddle" value="REGISTER ME" onclick="validate()">

- In your validate() function, add the action value:
document.forms[0].action = "new_user.asp";document.forms[0].submit();

This will get processed only when all the conditions return true.

June 4th, 2004, 02:42 AM

Yeruhn

Contributing User

Join Date: Feb 2004

Location: Netherlands

Posts: 428

Time spent in forums: 2 Days 16 h 35 m 27 sec
Reputation Power: 10

Validate() must return true if the submit is allowed, otherwise false. Validate() must not do a submit itself.
And you should call validate() like:
onclick = "return validate()"
That should do the trick...

June 4th, 2004, 10:36 AM

Sweety_oh

Registered User

Join Date: Apr 2004

Posts: 23

Time spent in forums: < 1 sec
Reputation Power: 0

Still not working

Hi,

I tried doing the changes that you both have suggested but it is still behaving the same. It do prompts that say name field is blank and when i click ok it goes directly to the asp page. If I am taking the action part from form and putting it in validate function as you have suggested that it gives error that "RESOURCE NOT ALLOCATED". It is even not validating the passwords as i want beacuse it does not give any message if i am entering less than six characters and even if the passwords are not match.

Sweety

June 4th, 2004, 05:23 PM

Arnica

Registered User

Join Date: Jun 2004

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

Change the input type to 'button' and that will only allow submission via the validate() function.

Didn't have time to check your validation routines but it will stop the form firing which is what you need.

Mick

June 4th, 2004, 08:30 PM

Arnica

Registered User

Join Date: Jun 2004

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

I realised I should have placed a caveat on the above reply in that the method should only be used in a controlled environment - ie you can guarantee that the users will have javascript enabled. Otherwise it is best to go with the suggestion of Yeruhn. I've also adjusted the script so that it validates your passwords but in a slightly different way. The changed sections are:

Code:

function validate()
{
 if ( isName() && isPass() && isDept() && isBuild() && isEmail() && isPhone())
 {
  return true;
 }
return false;
}
 
//.....
 
// Password Validator
function isPass() 
{
 var str = document.forms[0].userpassword.value;
 if ((str == "") || (str.length < 6)) 
 {
  alert("\nThe PASSWORD field is either empty or less than 6 characters.\n\nPlease re-enter your Password.")
  document.forms[0].userpassword.focus();
 return false;
 }
 var str1 = document.forms[0].userpassword1.value;
 if (str != str1)
 {
 alert("Passwords typed do not match, please re-enter your passwords.\n\n");
 document.forms[0].userpassword1.select();
 document.forms[0].userpassword1.focus();
 return false;
 }
return true;
}
 
//...

<tr align="left">
 <td><span class="style2">Password:</span></td>
 <td><input type="password" name="userpassword"><font color="red">*</font></td>
</tr>
<tr align="left">
 <td><span class="style2">Retype Password:</span></td>
 <td><input type="password" name="userpassword1" ><font color="red">*</font></td>
</tr>

 
//...
 
<input type="submit" align="absmiddle" value="REGISTER ME" onclick="return validate();">

Hope this helps

Mick

June 7th, 2004, 12:55 PM

Sweety_oh

Registered User

Join Date: Apr 2004

Posts: 23

Time spent in forums: < 1 sec
Reputation Power: 0

I did the changes that you all kbogart,Yeruhn and Arnica have suggested it is validating for all the blank fields now and even it doesn't skips to the asp page till all the mandatory fields are entered but still the password validation is not working i don't know why? Is the onBlur function not working? Do we have onlostfocus function in javascript so that i can use it on the second password text field.

Thanks to all of you who helped me out and are tring to help me out.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: