Validate Login Page Using JavaScript

Submitted by GeePee on Monday, March 30, 2015 - 23:32.

Having a login page made in HTML alone is not enough without form validation. Validating form makes your visitor life easier by knowing which of the element are lacking some information.

There are so many advantage of validating a form.

Avoid additional load on your web server
Avoid typing information repeatedly
Avoid page reload
Avoid inconsistent value like email address

The only problem with JavaScript validation is if the user disabled the JavaScript support on their browser. If this is the case, you need to make sure that you are also validating the form in server-side. In this case, no invalid information will pass to your database.

The code below is useful on our previous tutorial on “How to Create Secure Login Page in PHP/MySQL”

Here's the code for our login form with JavaScript validation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Validation</title>
<script type="text/javascript">
function validateForm()
{
	var user=document.login.username.value;
	var user=user.trim();
	var pass=document.login.password.value;
 
	if(user == '')
	{
		document.getElementById('error').innerHTML="Please Enter Username";
		return false;
	}
 
	if(pass == '')
	{
		document.getElementById('error').innerHTML="Please Enter Password";
		return false;
	}
}
</script>
</head>
<body>
<form id="login" name="login" method="post" action="login.php" onsubmit="return validateForm()">
	<table width="510" border="0" align="center">
		<tr>
			<td>Login Form</td>
			<td><div id="error"></div></td>
		</tr>
		<tr>
			<td>Username:</td>
			<td><input type="text" name="username" id="username" /></td>
		</tr>
		<tr>
			<td>Password</td>
			<td><input type="password" name="password" id="password" /></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><input type="submit" name="button" id="button" value="Submit" /></td>
		</tr>
	</table>
</form>
</body>
</html>

Add new comment

619 views

Validate Login Page Using JavaScript

Tags

Add new comment