<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing fo Validation using Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<script type="text/javascript">
var loginForm;
window.onload = init;


function init()
{
loginForm = document.getElementById('login');
loginForm.onsubmit = function()
{
return canSubmit(this);
}
loginForm.username.focus();
}
function filled(field)
{
if(field.value == " " || field.value == null)
{
return false;
}else{
return true;
}
}


function canSubmit(form)
{
if (!filled(form.username))
{
alert("Please enter Ur Username");
form.username.focus();
return false;
}
else if (!filled(form.password))
{
alert("Login Failed. Please enter ur Password");
form.password.focus();
return false;
}
else if (!filled(form.age))
{
alert("Login Failed. Please enter ur age");
form.password.focus();
return false;
}
else if (!filled(form.sex))
{
alert("Login Failed. Please enter ur sex");
form.password.focus();
return false;
}
else if (!filled(form.dob))
{
alert("Login Failed. Please enter ur dob");
form.password.focus();
return false;
}
return true;
}
</script>
</head>
<body onLoad ="init()">
<form name="login" method="POST" action="ownerLogin.php" >
<div align="center">
<center>
<table border="1" cellpadding="12" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td><font face="Arial" style="font-size: 10.5pt" color="#FFCC00">User Name</font></td>
<td><input type="text" name="username" size="20"></td>
</tr>
<tr>
<td>
<font face="Arial" style="font-size: 10.5pt" color="#FFCC00">Password</font></td>
<td><input type="password" name="password" size="20"></td>
</tr>
<tr>
<td>
<font face="Arial" style="font-size: 10.5pt" color="#FFCC00">Age</font></td>
<td><input type="text" name="age" size="20"></td>
</tr>
<tr>
<td>
<font face="Arial" style="font-size: 10.5pt" color="#FFCC00">Sex</font></td>
<td><input type="text" name="sex" size="20"></td>
</tr>
<tr>
<td>
<font face="Arial" style="font-size: 10.5pt" color="#FFCC00">DOB</font></td>
<td><input type="text" name="dob" size="20"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value=" Login to ur Account " name="submit" ></a></td>
</tr>
</table>
</center>
</div>
</form>
</body>
</html>

The error is that alert statements are not woring if we miss any fields....

Edited 3 Years Ago by happygeek: fixed formatting

you can try this validation if you like:

<script type="text/javascript">
<!--


function validate_form ( )
{
valid = true;


if ( document.login.username.value == "" )
{
alert ( "Missing field" );
valid = false;


}


if ( document.login.password.value == "" )
{
alert ( "Missing field" );
valid = false;


}


if ( document.login.age.value == "" )
{
alert ( "Missing field" );
valid = false;


}


if ( document.login.sex.value == "" )
{
alert ( "Missing field" );
valid = false;


}


if ( document.login.dob.value == "" )
{
alert ( "Missing field" );
valid = false;


}
return valid;


}


//-->
</script>


<!--Here's your form-->
<form name="login" method="POST" action="ownerLogin.php" onsubmit="return validate_form ( );">

Edited 3 Years Ago by happygeek: fixed formatting

This article has been dead for over six months. Start a new discussion instead.