Home ProgrammingJavaScript Login Form Validation with JavaScript

Login Form Validation with JavaScript

by John Bhatt
3112 views

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.

ShikshaNet-LoginForm

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.

Shikshanet-Login-Validated

Shikshanet-Login-Validated 2

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

You may also like

2 comments

Genie Resch June 19, 2016 - 10:57 pm

I could not refrain from commenting. Very well written!

Reply
Ashton Doolette June 20, 2016 - 10:44 pm

Have you ever considered about adding a little bit more than just your articles? I mean, what you say is important and everything. However imagine if you added some great images or videos to give your posts more, “pop”! Your content is excellent but with images and clips, this blog could certainly be one of the most beneficial in its field. Excellent blog!

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Login Form Validation with JavaScript

by John Bhatt time to read: 2 min
2