Login Form Validation with JavaScript

Hi,

Lets come back to our ASP.NET series. This time we are sharing a simple tip for validating Login form using JavaScript.

Login Form Validation

Lets have look at our ASP.NET login form.

<table align="center" border="0">
    <tr>
        <td align="right" class="TxtLabels">Username:
        </td>
        <td class="SpacerCell">&nbsp;
        </td>
        <td align="left">
            <asp:TextBox ID="TextBox1" runat="server" ToolTip="Enter your Username, Email ID or Mobile Number Here."
                CssClass="TextBox" TabIndex="1"> </asp:TextBox>
        </td>
        <td>
            <asp:LinkButton ID="LinkButton1" runat="server" ToolTip="Click here in case you forgot your Username!"
                CssClass="TxtLabels" Text="Forgot Username?"></asp:LinkButton>
        </td>
    </tr>
    <tr>
        <td align="right" class="TxtLabels">Password:
        </td>
        <td class="SpacerCell">&nbsp;
        </td>
        <td align="left">
            <asp:TextBox ID="TextBox2" runat="server" ToolTip="Your Password or Secret Code."
                TextMode="Password" CssClass="TextBox" TabIndex="2"></asp:TextBox>
        </td>
        <td>
            <asp:LinkButton ID="LinkButton2" runat="server" ToolTip="Click here in case you forgot your Password!"
                CssClass="TxtLabels" Text="Forgot Password?" OnClick="LnkPassword_Click"></asp:LinkButton>
        </td>
    </tr>
    <tr>
        <td class="SpacerCell">&nbsp;
        </td>
        <td class="SpacerCell">&nbsp;
        </td>
        <td align="center">
            <asp:Button ID="Button1" runat="server" Text="Enter" ToolTip="Login/Signin to your very own Network."
                CssClass="BtnSignIn" OnClientClick="return ValidateForm();" OnClick="BtnLogIn_Click" TabIndex="3" />
            &nbsp;&nbsp;&nbsp;&nbsp;
                                        <input type="reset" title="Clear Form and Re-Enter your Credentials!" value="Re-Enter"
                                            class="BtnSignIn" />
        </td>
        <td>
            <asp:Label ID="Label1" runat="server" ToolTip="Sorry, This is the Actual Reason for Failure!"
                CssClass="TxtLabels"></asp:Label>
        </td>
    </tr>
</table>

This design will look similar like below screen.

Now lets validate this form using JavaScript so, user can be assisted more easily and gets exact error message quickly before sending request to Server.

JavaScript code

    <script language="javascript" type="text/javascript">
        function ValidateForm() {
            var User = document.getElementById("ContentPlaceHolder1_TxtUserName").value;
            var Pass = document.getElementById("ContentPlaceHolder1_TxtPassword").value;

            if (User == "" && Pass == "") {
                alert("Username and Password are Necessory!, Please enter and try again.");

                document.getElementById("ContentPlaceHolder1_TxtUserName").focus();
                return false;
            }
            else if (Pass == "") {
                alert("Enter Password for : n" + User.toString());

                document.getElementById("ContentPlaceHolder1_TxtUserName").focus();
                return false;
            }
            else if (User.length < 4) {
                alert("Invalid Length. Username should be at least 4 character long.");

                document.getElementById("ContentPlaceHolder1_TxtUserName").focus();
                return false;
            }
            else if (Pass.length < 4 || Pass.length >= 18) {
                alert("Invalid Length!, Password must be at least 4 character and at most 18 in Length.");
                document.getElementById("ContentPlaceHolder1_TxtPassword").focus();
                return false;
            }
            else if (User.length == 0) {
                alert("Enter Username! Can not be blank!");

                document.getElementById("ContentPlaceHolder1_TxtUserName").focus();
                return false;
            }

            return true;
        }
    </script>

Now, lets have look at above JavaScript code.

[box type=”info” align=”alignleft” class=”” width=””]1. If user name and password are blank, there will be a error message.

2. If password is not entered, a alert will thrown with Username.

3. If user name is less than 4 character, there will be another error message.

4. If password is outside 4 character and 18 character, you will see an alert.[/box]

Lets have a look at output below.

Share your views via comments and do not forget to share among your friends.