It is a simple JavaScript code to validate a login form . Here HTML tags were used to design login form. And JavaScript used to run function for validating data. This code will check whether the length of name and password is greater than 6 or not and the letters typed in both password fields are same or not
Code:
<html>
<head>
<title>Login page </title>
<script type="text/JavaScript">
function validate(form)
{
var returnValue=true;
if(frmLogin.txtUserName.value.length < 6)
{
returnValue = false;
alert("Your username must be at least\n6 characters
long.\nPlease try again.");
frmLogin.txtUserName.value = "";
frmLogin.txtUserName.focus();
return returnValue;
}
if (frmLogin.txtPassword1.value.length < 6)
{
returnValue = false;
alert("Your password must be at least\n6 characters long.\n Please try again.");
frmLogin.txtPassword1.value = "";
frmLogin.txtPassword2.value = "";
frmLogin.txtPassword1.focus();
return returnValue;
}
if (frmLogin.txtPassword1.value != frmRegister.txtPassword2.value)
{
turnValue = false;
alert("Your password entries did not match.\nPlease try again.");
frmLogin.txtPassword1.value = "";
frmLogin.txtPassword2.value = "";
frmLogin.txtPassword1.focus();
return returnValue;
}
if(returnValue!=false)
{
alert("You are successfully login................. \n
THANK YOU........................");
return returnValue;
}
}
</script>
</head>
<body>
<h1 align="center"> LOGIN IN ACCOUNT.............</h1>
<form name="frmLogin" method="post" action=""
onsubmit="return validate(this);" >
<table align="center">
<tr>
<td align ="right">User Name<p></td>
<td><input align="right" type="text"
name="txtUserName" size="12" /><p></td>
</tr>
<tr>
<td align ="right">Password<p></td>
<td><input type="password" name="txtPassword1" size="12" />
<p></td>
</tr>
<tr>
<td align ="right">Reenter Password<p></td>
<td><input type="password" name="txtPassword2" size="12" />
<p></td>
</tr>
<tr>
<th colspan="2"><input type="submit" value="Log in" /></th>
</tr>
</table>
</form>
</body>
</html>
Output with Example:
Note: Here error messages are shows as alert boxes. But in a perfect work, that is not good thing. That is, you have to show error messages in same page without refreshing the page. You can see how to show error messages in current page without alert box here
First time visiting your website, I enjoy your website!