Javascript [Archive] - Virtual Dr Forums-Computer Tech Support

Click to See Complete Forum and Search --> : Javascript

PinkDady

March 19th, 2007, 05:43 AM

Guys help me in identifying the errors in the following code and hence writing the code that validate form

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>First Name</title>
<script type="text/javascript">
//function RegExp()

function validate()
{
var fname = document.getElementById("fname").value
var lname = document.getElementById("lname").value
var omang = document.getElementById("omang").value
var chief = document.getElementById("chief").value
var address = document.getElementById("address").value
var cellNumber = document.getElementById("cell").value
var regExp = (/[A-Za-z0-9]+\@[A-Za-z0-9]+(\.[A-Za-z0-9])*\.[A-Za-z]/)
var email = document.getElementById("email").value
var reg= (/[A-Za-z]\*/)
var c = (/[0-9]*/)
submitOK = "true"

if(fname <reg)
{
alert("Enter a valid first name")
submitOK = "false"
}
else if(lname<reg)
{
alert("Enter a valid surname")
submitOK = "false"
}
else if (omang.length!=9||isNaN(omang))
{
alert ("Please enter a valid ID Number")
submitOK = "false"
}
else if(chief<reg)
{
alert("Enter a valid Chief's name")
submitOK = "false"
}
else if(address<reg)
{
alert("Enter a valid Address")
submitOK = "false"
}

else if(cellNumber<c && cellNumber.length!=8)
{
alert ("Please enter a cell Number")
submitOK = "false"
}

else if(email && regExp==-1)
{
alert ("Please enter a valid e-mail address")
submitOK = "false"
}

if (submitOK=="false")

{
return false
}
}

</script>
<script>
function Confirm()
{
var agree = confirm ("Are you sure you want to resert");
if (agree)
{
return true
}
else{
return false
}
}
var newWindow;
</script>
<script type ="text/javascript">
function openWindow()
{
newWindow=window.open("","myWindow", "toolbar=0, menubar=0");
newWindow.document.write("<h1> This is Heading h1 for this Window</>");
}

</script>
</head>

<body bgcolor =#FFFFFF>

<form method="POST" action="--WEBBOT-SELF--" onsubmit = "return validate ()">

<p>        </p>
<p> </p>
<div align="center">
<table border="1" width="80%" id="table1" bordercolor="#000000">
<tr>
<td width="39%" bordercolor="#FFFFFF" bgcolor="#C0C0C0" align="left">
<b>First Name</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><input type="text" name="T1" size="20" id="fname"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><b>Surname</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><input type="text" name="T2" size="20" id="lname"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><b>Omang</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><input type="text" name="T3" size="20" id="omang"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><b>Chief</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><input type="text" name="T4" size="20" id="chief"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><b>Age</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><select size="1" name="D1" id="age">
<option>Select your age</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>

</select ></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><b>Address</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><input type="text" name="T5" size="20" id="address"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" height="25" align="left"><b>Cell Number</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" height="25" align="left"><input type="text" name="T6" size="20" id="cell"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><b>Email Address</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><input type="text" name="T7" size="20" id="email"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><b>Gender</b></td>
<td width="23%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left">
<input type="radio" value="V3" checked name="R1"><b>Male</b></td>
<td width="15%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left">
<input type="radio" name="R1" value="V4"><b>Female</b></td>
</tr>
<tr>
<td colspan="3" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left">
<p align="center"> 
<button name="B4" style="width: 56; height: 26" onclick= "openWindow()">Help</button>    
<input type="submit" value="Submit" name="B1">  
<input type="reset" value="Reset" name="B2" onclick="return Confirm()"></td>
</tr>
</table>
</div>
<p> </p>
<p> </p>
</form>

</body>

</html>

JPnyc

March 20th, 2007, 10:15 AM

As far as the validation goes, you never return true, so the form probably won't submit. You also don't need to getElementById for all those, but it's not wrong to do so.

PinkDady

March 20th, 2007, 02:54 PM

I did not use return true for validating, I only used return true in the confirmation msg, that is if the user enters information into the form and then by mistake he clicks reset confirmation msg will pop up, asking him whether he want to reset or not, and if he clicks ok it will return true (a fresh form) and if he clicks cancel nothing will happen..........

The following is the code....... and it is working well

<script>
function Confirm()
{
var agree = confirm ("Are you sure you want to resert");
if (agree)
{
return true
}
else{
return false
}
}
</script>
<input type="reset" value="Reset" name="B2" onclick="return Confirm()">

JPnyc

March 20th, 2007, 07:59 PM

But you have to return true on the validation function somewhere, or the form will never submit. That's not the validation function.

PinkDady

March 21st, 2007, 03:57 PM

May be u are not getting ma question..... This form is updating, but wrongly.

Plis try to run this code en see how it works....

PinkDady

March 22nd, 2007, 02:34 AM

Well boss thanx, I managed to correct the code.... The following code is validating correctly... Test it

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>First Name</title>
<script type="text/javascript">

function validate()
{

var fname = document.getElementById("fname").value
var lname = document.getElementById("lname").value
var omang = document.getElementById("omang").value
var chief = document.getElementById("chief").value
var address = document.getElementById("address").value
var cellNumber = document.getElementById("cell").value
var regExp = (/[A-Za-z0-9]+\@[A-Za-z0-9]+(\.[A-Za-z0-9])*\.[A-Za-z]/)
var email = document.getElementById("email").value
var reg= /^[a-z]+$/
var c = (/^[0-9]+$/)
submitOK = "true"

if(!reg.test(fname))
{
alert("Enter a valid first name")
submitOK = "false"
}
else if(!reg.test(lname))
{
alert("Enter a valid surname")
submitOK = "false"
}
else if (omang.length!=9||!c.test(omang))
{
alert ("Please enter a valid ID Number")
submitOK = "false"
}
else if(!reg.test(chief))
{
alert("Enter a valid Chief's name")
submitOK = "false"
}
else if(!reg.test(address))
{
alert("Enter a valid Address")
submitOK = "false"
}

else if(!c.test(cellNumber)|| cellNumber.length!=8)
{
alert ("Please enter a cell Number")
submitOK = "false"
}

else if(!regExp.test(email))
{
alert ("Please enter a valid e-mail address")
submitOK = "false"
}

if (submitOK=="false")

{
return false
}

}

</script>
<script>
function Confirm()
{
var agree = confirm ("Are you sure you want to resert");
if (agree)
{
return true
}
else{
return false
}
}

function openWindow()
{
var newWindow;
newWindow=window.open("","myWindow","toolbar=0, menubar=0");
newWindow.document.write("<h1>"+"<align= center>"+"Welcome to my help webpage</br><h1/>");
}

</script>
</head>

<body bgcolor =#FFFFFF>

<form method="POST" action="--WEBBOT-SELF--" onsubmit="return validate()">

<p align="center">       <i><b><font size="5" face="Algerian">
</font><font size="5" face="Cooper Black">REGULAR EXPRESSIONS</font></b></i></p>
<p align="center"><i><b><font size="4" face="Cooper Black">FORM VALIDATION</font></b></i></p>
<div align="center">
<table border="1" width="77%" id="table1" bordercolor="#000000">
<tr>
<td width="39%" bordercolor="#FFFFFF" bgcolor="#C0C0C0" align="left">
<b>First Name</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><input type="text" name="Name" size="20" id="fname"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left" height="26"><b>Surname</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left" height="26"><input type="text" name="T2" size="20" id="lname"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><b>Omang</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><input type="text" name="T3" size="20" id="omang"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left" height="26"><b>Chief</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left" height="26"><input type="text" name="T4" size="20" id="chief"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><b>Age</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><select size="1" name="D1" id="age">
<option>Select your age</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>

</select ></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left" height="26"><b>Address</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left" height="26"><input type="text" name="T5" size="20" id="address"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" height="26" align="left"><b>Cell Number</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" height="26" align="left"><input type="text" name="T6" size="20" id="cell"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><b>Email Address</b></td>
<td colspan="2" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left"><input type="text" name="T7" size="20" id="email"></td>
</tr>
<tr>
<td width="39%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left" height="25"><b>Gender</b></td>
<td width="23%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left" height="25">
<input type="radio" value="V3" name="R1" ><b>Male</b></td>
<td width="14%" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left" height="25">
<input type="radio" name="R1" value="V4"><b>Female</b></td>
</tr>
<tr>
<td colspan="3" bgcolor="#C0C0C0" bordercolor="#FFFFFF" align="left">
<p align="center"> 
<button name="B4" style="width: 56; height: 26" onclick= "openWindow()">Help</button>    
<input type="submit" value="Submit" name="B1" onclick="return validate()">  
<input type="reset" value="Reset" name="B2" onclick="return Confirm()"></td>
</tr>
</table>
</div>
<p> </p>
<p> </p>
</form>

</body>

</html>

pavanande

March 24th, 2007, 10:54 AM

the character that we r enterd in the Omang textbox is numericals r alphabets r alphanumerical. give the clarification about it.

emty

March 24th, 2007, 11:58 PM

Huh???:confused:

PinkDady

March 26th, 2007, 09:10 AM

Omang in Botswana means ID Number, so the field is going to capture on a nine digits number, and currently I have set the First Name fields to accept only lower case alphabets....
Thanx guys en enjoy JS