Shaakunthala's Portal

Well, I thought about writing something related to stuff that I'm currently working on. First of all,.. I must say... It's not a big deal. What? Form validation with Javascript.

First, we'll create our HTML form. Suppose it is a login form. Users may have to enter username and password to login to your site. Here is the HTML form and source code.

Username:
Password:

Code:

<form method="post" name="frmLogin" id="loginform" action="login.php" onsubmit="javascript:return validateForm();">
<table border="0">
<tr>
<td>Username: </td><td><input type="text" name="txtuser" id="user" /></td><td><span style="color:#FF0000" id="user_msg"></span></td>
</tr>
<tr>
<td>Password: </td><td><input type="password" name="txtPwd" id="pass" /></td><td><span style="color:#FF0000" id="pass_msg"></span></td>
</tr>
<tr>
<td></td><td><input type="submit" name="btnGo" id="sub" /></td><td></td>
</tr>
</table>
</form>

Next thing is to write our Javacsript code. In the first line of the above code, the value of the onsubmit attribute is "javascript:return validateForm();". So, validateForm() is the function which we have to write code for.

Write the following code inside the head tags of your HTML code.

<script type="text/javascript" language="javascript">
// <!--
function validateForm(){
    var username=document.getElementById("user").value;
    var password=document.getElementById("pass").value;
    var ret=true;
    if(password.length==0){
        ret=false;
        document.getElementById("pass_msg").innerHTML="Invalid password";
        document.getElementById("pass").focus();
    }else{
        document.getElementById("pass_msg").innerHTML="";
    }
    if(username.length<4 || username.length>15){
        ret=false;
        document.getElementById("user_msg").innerHTML="Invalid username";
        document.getElementById("user").focus();
    }else{
        document.getElementById("user_msg").innerHTML="";
    }
    if(ret==false){
        return ret;
    }
}
// -->
</script>

OK, now here is what the code does. If user forgets to enter the username/ password, it shows error message(s) in red and focuses on the relevent text box so user does not have to click on it before correcting the error.

In my javascript code you can see that I'm checking the form from the bottom to top. That is because I'm moving the focus to the relevent text box. Suppose the user forgets to enter both username and password. The focus should move to the username box. But, if I check the code from the top to bottom, the focus will move to the password box. That is the opposite of what we want to see. So, to get the thing done correctly, the form should be checked from the bottom to top.

This form can be further improved to check the form using AJAX, like what we see in ImageShack.