Resources » Articles/Knowledge Sharing » Computer & Technology

Validating Login form using JavaScript


Last Updated:   Category: Computer & Technology    
Author: Member Level: Gold    Points: 20


This article describes about the validating login form using Javascript.




Validation for the controls is an important factor in web programming. Usually client side scripts are used for the validation at the client's browser. JavaScript or VB Script can be used to validate at the client side. But VB script supports only IE browsers. JavaScript is a widely accepted scripting language, which is compatible with all browsers.

Validations can be performed to detect several different several aspects. Validations can be performed to check for blank fields, it can detect for whether the filled value is a valid data. Say there may be some restrictions on the username and password. Some sites may only allow alphanumeric characters, and only underscore for username, password can contain letters and digits only. So all these checking can be performed with JavaScript.

Here we are only focusing on a 'Login Form' and we are validating the user login. First of all we need to check for a null field. A username field, password field and Login button are there. When a user clicks Login we will check for any valid values, if the field is blank we will display a error message near to the field which is empty and will stop post back the login information to the server. For this we will use some JavaScript and CSS codes.

To start with our validation, first we need to create a form with login controls, username, password and a submit button. Here we also uses a <div> tag with each field, to show the error message if the field is empty. We will first set its visibility to false and when submitting the form it will be shown if associated field is blank. We can set the visibility of a HTML control using style.display property set to 'block' or 'none'. A sample code to these all are given under :


<html>
<head>
<style>
div{
color:red;
}
</style>
<script language = "Javascript">
function resetall(){
document.getElementById("Alertuser").style.display="none";
document.getElementById("Alertpass").style.display="none";
}
function alertError(){
if(document.frmLogin.txtUser.value=="")
{
document.getElementById("Alertuser").style.display="block";
return false;
}
else
document.getElementById("Alertuser").style.display="none";
if(document.frmLogin.txtPass.value=="")
{
document.getElementById("Alertpass").style.display="block";
return false;
}
else
document.getElementById("Alertpass").style.display="none";
return true;
}

</script>
</head>

<body onLoad="resetall()">
<form name="frmLogin" id="frmLogin" method="get" onSubmit="return alertError()">
<table>
<tr>
<td><label for="txtUser">Username</label></td>
<td><input type="text" name="txtUser" id="txtUser" onchange="resetall()"></td>
<td><div id="Alertuser">Username cannot be blank</div></td>
</tr>

<tr>
<td><label for="txtPass">Password</label></td>
<td><input type="password" name="txtPass" id="txtPass" onchange="resetall()"></td>
<td><div id="Alertpass">Password cannot be blank</div></td>
</tr>
<tr><td><input type="submit" value="Login"></td></tr>
</table>
</form>
</body>
</html>


When the page is loading we are hiding the error messages using resetall() function. When submit button of the form is clicked, alertError() function is called and function checks for any blank fields and if any blank field found it will display associated error message and will return false, to stop post backing the form data. We also called resetall() function from each of the field's onChange event, it will hide the displayed error message when you key in some values and change its focus.

So thats all we have done so far, now we can focus on how to validate the user input. Suppose user has key in some values in both fields, and click the submit button, before submitting it to the server we need to check whether entered data are valid or not. So here we are assuming some rules for our username and password. We are considering that only Alphabets, Numbers, and underscore is allowed for username. For password only alphabets and numbers are allowed. Here we will also check for blank fields, reporting error is done through alert boxes. Checking of the valid characters are performed using the 'Regular Expressions'. JavaScript has a method - 'test' which will search for a patter in a string, using this method and 'Regular expressions' we can find out whether the input data is valid or not. Have a look at the following example.


<html>
<head>
<script>
function validate()
{
var user=document.frmlogin.username.value;
var invalid=/\W/; //Alphanumeric characters and Underscore permitted
if(user==""){
alert("Enter your username!");
return false;
}
if(invalid.test(user)){
alert("Username contain Invalid characters!");
return false;
}
if(user.length<6 || user.length>15){ //username must be 6 - 15 letters length
alert("Username must be 6 - 15 characters length!");
return false;
}

var pass=document.frmlogin.userpass.value;
invalid=/[\W_]/; //Alphabets and digits only allowed
if(pass==""){
alert("Enter your password!");
return false;
}
if(pass.length<6){
alert("Password must contain atleast 6 letters!");
return false;
}
if(invalid.test(pass)){
alert("Password contain Inalid characters!");
return false;
}
return true;
}
</script>
</head>
<body>

<form name="frmlogin" method="post" action="#" onsubmit="return validate()">
Username: <input type="text" name="username" /> <br />
Password: <input type="password" name="userpass" /> <br />
<input type="submit" name="login" value="Login" />
</form>
</body>
</html>


When user submits the form 'validate()' function is called and it first checks whether the username is entered or not, if it is not it alerts a error message and stop posting the data. If user entered then it checks whether it is valid username, only alphanumeric characters and underscore is permitted in our case. If it is valid then it checks whether the length of the username is greater than 6 to 15 letters length, if it is satisfying then it is validates the password field. It checks whether the password satisfies all the required rules. Here we assumed password must contain at least 6 characters and only alphanumeric characters is allowed.

Try this.. Happy Coding!


Did you like this resource? Share it with your friends and show your love!




Responses to "Validating Login form using JavaScript"
Feedbacks      

Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index

    Awards & Gifts
    Active Members
    TodayLast 7 Daysmore...

    ISC Technologies, Kochi - India. Copyright © All Rights Reserved.