Jitesh Byahut 2/25/2014 3321

Client Side Validation Using JQuery In Asp.Net

Here we are using validation in JQuery.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Jquery Validation</title>

    <script src="../../Script/jquery-1.9.0.min.js" type="text/javascript"></script>

<script type="text/javascript">

        function validation() {

            // Required field validation for Name

            if ($('#<%=txtName.ClientID%>').val() == "") {

                alert("Please enter Name");

                return false;

            }

            // Required field validation for Mobile

            if ($('#<%=txtMobile.ClientID%>').val() == "") {

                alert("Please enter Mobile");

                return false;

            }

            // Regular expression validation for Mobile

            if ($('#<%=txtMobile.ClientID%>').val() != "") {

                if (isNaN($('#<%=txtMobile.ClientID%>').val())) {

                    alert("Please enter only numeric values");

                    return false;

                }

            }

            // Required field validation for Email

            if ($('#<%=txtEmail.ClientID%>').val() == "") {

                alert("Please enter EmailID");

                return false;

            }

            // Regular expression validation for Email

            if ($('#<%=txtEmail.ClientID%>').val() != "") {

                var pattern = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

 

                if (!pattern.test($('#<%=txtEmail.ClientID%>').val())) {

                    alert("Please enter valid EmailID");

                    return false;

                }

            }

            // Required field validation for Address

            if ($('#<%=txtAddress.ClientID%>').val() == "") {

                alert("Please enter Address");

                return false;

            }

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

        <table align="center" >

            <tr>

                <td>Name</td>

                <td>

                    <asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td>Mobile</td>

                <td>

                    <asp:TextBox ID="txtMobile" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td>Email</td>

                <td>

                    <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td>Address</td>

                <td>

                    <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox></td>

            </tr>

            <tr>

                <td colspan="2" align="center">

                    <asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="return       validation();" OnClick="btnSave_Click" /></td>

            </tr>

        </table>       

    </div>

    </form>

</body>

</html>

View output :

demoimage


Please give your feedback for improving this page