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




function f()



alert("UserId can't be blank");

else if(document.getElementById('pwd').value.length==0)

alert("Password can't be blank");



alert("successfully logged in");






UserId : <input type="text" id="uid">

Passowrd: <input type="text" id="pwd">
<br /><br/>

<input type ="button" onclick="f()" value ="LogIn">




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:



<title>Welcome Page</title>



<P> <h1> Welome to Home Page </h1> </P>



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
TodayLast 7 Daysmore...

Awards & Gifts

Online Members

Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India