Validating Login form using JavaScript


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!


Related Articles

Creating new JEE 5 applications (Java and EJB Web Services) using RAD 7.5

Now days, most of the enterprise applications are developed in RAD 7.0+ (Rational Application Developer). The Web service application can be written in Java or in EJB. For creating Web services in Java or EJB, the vast documentation is available. Referring such documentation during speedy development period becomes a hectic job. So to avoid it, this article will help to easily develop a JEE5 application using simple steps.

Program for Addition performer in Java

This article provides a description to the addition performer in Java, that can perform addition operation on two input numbers. Code for the addition performer is provided in the article. The program is based on use of Swings. In Java Frames can be created and different text fields alongwith labels corresponding to them can be added. And use of all these elements can develope an efficient adder.

What is difference between an Interface and Abstract class in Java?

Are you looking for an article which explains the concepts of an Interface and Abstract class in simple language? Then your search ends here. Read this article, herein the detail about abstract class and an Interface is given. Also the important differences between an Interface and Abstract class is in Java is explained. This article highlights the important aspects regarding whether abstract class to be used or an Interface is to be used for given requirement of Enterprise application.

Directory Structure - XML Output

In this article, I have submitted a Java program. We will be able to get the dynamic XML file with treeview represents a folder and file structure of a given folder path using it. This Java program also show how to use a recursive function to read a directory structure and then save it to XML file. I commented properly for your better understanding how the program flow goes. The output XML file is well-formed

More articles: Java

Comments



  • 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:
    Email: