Tutorials » Javascript tutorials »

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



Next Chapter: Calling JavaScript from some other page
Previous Chapter: Calling JavaScript function in an Event
More Chapters: Javascript Tutorials
More Tutorials: Tutorial Index



Top Contributors
Today
    Last 7 Daysmore...

    Awards & Gifts

    Online Members

    Vishwa
    More...
     
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India