Javascript Validation for Login page

By | November 14, 2012

Validation for login page is very important, because we can validate the user input using client side languages like jquery, javascript. Here is the Javascript Validation for Login page tutorial. Client side validation will reduce the server bandwidth usage.

onsubmit=”return valid()” – This is used to  call valid() javascript function and return the function’s result.

var user=document.login.user.value;  - here login is the name of form, user is the name of username textbox. The username which we have given will be stored in user variable. Likewise password also stored in pass variable.

Trim Function in Javascript

var user=document.login.user.value;

var user=user.trim();

Username value is stored in user variable, we are checking username is whether null or not null. When user gives space in username field, it will be taken as not null. So we have to avoid this issue by using trim function.

Trim function will deletes the space in fields, so we user gives space in username field trim(),  function will deletes the space and make it as null.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function valid()
{
var user=document.login.user.value;
var user=user.trim();
var pass=document.login.pass.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>
<div id="error"></div>
<form name="login" method="post" action="" onsubmit="return valid()">
Username: <input type="text" name="user" /><br />
password<input type="password" name="pass" /><br />
<input type="submit" name="submit" />
</form>
</body>
</html>

One thought on “Javascript Validation for Login page

Leave a Reply

Your email address will not be published. Required fields are marked *