Prizes & Awards
My Profile
Active Members
TodayLast 7 Days
more...
|
A simple login Validation with JavaScript
This article explains a simple JavaScript validation
Here is an example of simple login page client side validation.
Save this as Login.html
<html>
<head>
<script>
function f()
{
if(document.getElementById('uid').value.length==0)
alert("UserId can't be blank");
else if(document.getElementById('pwd').value.length==0)
alert("Password can't be blank");
else
{
alert("successfully logged in");
window.open("Welcome.html");
}
}
</script>
</head>
<body>
UserId : <input type="text" id="uid">
<br/>
Passowrd: <input type="text" id="pwd">
<br /><br/>
<input type ="button" onclick="f()" value ="LogIn">
</body>
</html>
Explanation:
When we don't enter anything in palce of userid it gives a message that userid can't be blank.
The same is the case with password field.
When ever user press on login button then click event gets fired, it makes a call to function f() . The code in f () is executed.
document.getElementById () is use to identify the control that is given as parameter. Pass Id of the control as parameter.
We are checking for the value whether the control is empty or not.
document.getElementById (“ctrlId”).value indicates value of that is corresponds to that control. We are validating in such that if nothing is entered corresponding message is fired.
When we enter userid and password in textbox it goes to a page Welcome.html but since the page is not there you will get an error as page can’t be displayed in Popup. To avoid this type we need to have Welcome.html in the same folder where Login.html is saved.
Add the following HTML code:
<html>
<head>
<title>Welcome Page</title>
</head>
<body>
<P> <h1> Welome to Home Page </h1> </P>
</body>
</html>
save this as Welcome.html
|
|