JavaScript validation in asp.net website

Introduction In previous articles i explained the Example to implement Jquery form validations in asp.net and Message box in asp.net website using JavaScript and how to redirect visitor from one website to another website using java script and How to call java script function from code behind file in asp.net  and How to show Validation guidelines in web forms using JavaScript in Asp.net ?
In this article i am going to explain how to validate form data using JavaScript in asp.net.  I have tried to cover all the basic fields that are on the form and validated that all.

Description: An important point while creating ASP.NET Websites is to be able to check that the information users enter is valid. ASP.NET provides a set of validation controls that provide an easy-to-use but powerful way to check for errors and, if necessary, display messages to the user. Similarly we can also create functions in JavaScript to validate the form data before submitted to server thus saving the server time and overhead.

 Javascript validation example in asp.net


Implementation: In the design page(.aspx) create the structure having TextBoxes  to enter username, password ,confirm password, first name, last name, email address, phone number and locations.And also place a submit button as:

<table>
            <tr>
                <td>
                    Username</td>
                <td>
                    <asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td >
                    Password</td>
                <td>
                    <asp:TextBox ID="txtpwd" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td >
                    confirm password</td>
                <td>
                    <asp:TextBox ID="txtcnmpwd" runat="server"></asp:TextBox>
                </td>
            </tr>

            <tr>
                <td >
                    First name</td>
                <td>
                    <asp:TextBox ID="txtfname" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td >
                    last name</td>
                <td>
                    <asp:TextBox ID="txtlname" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td >
                    Emial Address</td>
                <td>
                    <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td >
                    Phone number</td>
                <td>
                    <asp:TextBox ID="txtphone" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td >
                    Location</td>
                <td>
                    <asp:TextBox ID="txtlocation" runat="server" Height="22px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td >
                    &nbsp;</td>
                <td>
                    <asp:Button ID="btnsubmit" runat="server" Text="Submit" />
                </td>
            </tr>
            <tr>
                <td >
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>

  • Now in the Head tag of the design page(.aspx) write the JavaScript function as:
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        function validationCheck()
        {
            var summary = "";
            summary += isvaliduser();
            summary += isvalidpassword();
            summary += isvalidConfirmpassword();
            summary += isvalidFirstname();
            summary += isvalidLastname();
            summary += isvalidEmail();
            summary += isvalidphoneno();
            summary += isvalidLocation();

            if (summary != "")
            {
                alert(summary);
                return false;
            }
            else {
                return true;
            }

        }
        function isvaliduser()
         {
            var id;
            var temp = document.getElementById("<%=txtuser.ClientID %>");
            id = temp.value;
            if (id == "")
             {
                return ("Please Enter User Name" + "\n");
            }
            else
            {
                return "";
            }
        }
        function isvalidpassword()
        {
            var id;
            var temp = document.getElementById("<%=txtpwd.ClientID %>");
            id = temp.value;
            if (id == "")
             {
                return ("Please enter password" + "\n");
            }
            else
            {
                return "";
            }
        }
        function isvalidConfirmpassword() {
            var uidpwd;
            var uidcnmpwd;
            var tempcnmpwd = document.getElementById("<%=txtcnmpwd.ClientID %>");
            uidcnmpwd = tempcnmpwd.value;
            var temppwd = document.getElementById("<%=txtpwd.ClientID %>");
            uidpwd = temppwd.value;

            if (uidcnmpwd == "" || uidcnmpwd != uidpwd)
             {
                return ("Please re-enter password to confrim" + "\n");
            }
            else {
                return "";
            }
        }
        function isvalidFirstname()
         {
            var id;
            var temp = document.getElementById("<%=txtfname.ClientID %>");
            id = temp.value;
            if (id == "")
            {
                return ("Please enter first name" + "\n");
            }
            else
            {
                return "";
            }
        }
        function isvalidLastname()
         {
            var id;
            var temp = document.getElementById("<%=txtlname.ClientID %>");
            id = temp.value;
            if (id == "")
            {
                return ("Please enter last name" + "\n");
            }
            else
            {
                return "";
            }
        }
        function isvalidEmail()
        {
            var id;
            var temp = document.getElementById("<%=txtEmail.ClientID %>");
            id = temp.value;
            var re = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
            if (id == "")
            {
                return ("Please Enter Email" + "\n");
            }
            else if (re.test(id))
             {
                return "";
            }

            else
             {
                return ("Email should be in the form ex:abc@xyz.com" + "\n");
            }
        }
        function isvalidphoneno()
        {
            var id;
            var temp = document.getElementById("<%=txtphone.ClientID %>");
            id = temp.value;
            var re;
            re = /^[0-9]+$/;
            var digits = /\d(10)/;
            if (id == "") {
                return ("Please enter phone no" + "\n");
            }
            else if (re.test(id))
            {
                return "";
            }

            else
            {
                return ("Phone no should be digits only" + "\n");
            }
        }
        function isvalidLocation()
         {
            var id;
            var temp = document.getElementById("<%=txtlocation.ClientID %>");
            id = temp.value;
            if (id == "")
             {
                return ("Please enter Location" + "\n");
            }
            else
            {
                return "";
            }
        }
</script>
</head>


C#.NET Code to implement form validations using javascript in asp.net
  • Now in the code behind file(.aspx.cs) write codeon page load event
protected void Page_Load(object sender, EventArgs e)
    {
        btnsubmit.Attributes.Add("onclick", "javascript:return validationCheck()");
    }

VB.NET Code to implement form validations using javascript in asp.net
  • Now in the code behind file(.aspx.vb) write codeon page load event
Protected Sub Page_Load(sender As Object, e As EventArgs)
                    btnsubmit.Attributes.Add("onclick", "javascript:return validationCheck()")
End Sub

Now over to you: 
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned for more technical updates." 
Previous
Next Post »

9 comments

Click here for comments
Unknown
admin
July 31, 2013 ×

You are Such a gr8 Programmer and your programming skills very huge penetration..........so pls give me your email ID becoz anyone query i ask 2 u and also give your facebook Email ID.

Reply
avatar
August 01, 2013 ×

Hello vipul..thanks for your appreciation..You can send me your query through contact us form http://www.webcodeexpert.com/p/contact-us.html. Stay tuned for more updates like this.

Reply
avatar
Spidey
admin
September 09, 2013 ×

Hello Lalit,
I have applied AJAX in gridview.. (UPDATE PANEL).. and i had a fileupload in one column and it was working fine with jquery for multiple file uploads. but after applying AJAX it is not working.
Any clue?
Thanks

Reply
avatar
September 09, 2013 ×

Read the article to solve your problem of fileupload control in update panel.

Solution to FileUpload control is not working in UpdatePanel.
http://www.webcodeexpert.com/2013/08/fileupload-control-in-update-panel.html

Reply
avatar
Unknown
admin
September 19, 2013 ×

hallo lalit sir u really such a darling u r a great programmer.and ur programme is very helful to a novice like me.great man...keepit up.....

Reply
avatar
September 19, 2013 ×

Thanks for your appreciation..keep reading..

Reply
avatar
Chanchal Purbia
admin
October 03, 2013 ×

Good article.......bt how can we validate password strength using javascript???

Reply
avatar
October 03, 2013 ×

Hi chanchal..you can use ajax password strength control for that purpose .Check the link http://www.webcodeexpert.com/2013/07/how-to-use-ajax-passwordstrength.html

Reply
avatar
Unknown
admin
August 26, 2015 ×

Kindly give an example of validation on asp Master pages. I have to validate my content page by jquery

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..