use jquery client side validation in asp.net web forms | Coding Solutions With Ankit

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="JqueryValidation.index" %>


<!DOCTYPE html>


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

<head runat="server">

    <title></title>

    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

    <script>

        $(document).ready(function () {


            //$("[id*=ControlID]");//Selector


            $("[id*=btnsubmit]").click(function () {

                if ($("[id*=txtname]").val() == "") {

                    alert("Please enter name");

                    $("[id*=txtname]").focus();

                    $("[id*=txtname]").css("border", "1px solid red");

                    return false;

                }

                else

                {

                    $("[id*=txtname]").css("border","1px solid green");

                }



                if ($("[id*=txtMobile]").val() == "") {

                    alert("Please enter mobile no");

                    $("[id*=txtmobile]").focus();

                    return false;

                }

                if ($("[id*=txtMobile]").val().length != 10) {

                    alert("Please enter valid mobile no");

                    $("[id*=txtmobile]").focus();

                    return false;

                }

                if ($("[id*=ddlstate] option:selected").val()==0)

                {

                    alert("Please select state");

                    $("[id*=ddlstate]").focus();

                    return false;

                }

                if ($("[id*=ddlstate] option:selected").val()=="--Select--")

                {

                    alert("Please select state");

                    $("[id*=ddstate]").focus();

                    return false;

                }

                if ($("[id*=txtemail]").val()=="")

                {

                    alert("Please select email");

                    $("[id*=txtemail]").focus();

                    return false;

                }

                alert("Okey");

                return true;

            });

        });

    </script>

</head>

<body>

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

        <div>

            <label>Name :</label>

            <asp:TextBox ID="txtname" runat="server"></asp:TextBox>

            <br/>

            <label>Mobile :</label>

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

            <br/>

            <label>State :</label>

            <asp:DropDownList ID="ddlstate" runat="server">

                <asp:ListItem Text="--Select--" Value="0"></asp:ListItem>

                <asp:ListItem Text="Uttar Pradesh" Value="1"></asp:ListItem>

                <asp:ListItem Text="Haryana" Value="2"></asp:ListItem>

            </asp:DropDownList>

            <br/>

            <label>Email :</label>

            <asp:TextBox ID="txtemail" runat="server"></asp:TextBox>

            <br/>

            <asp:Button ID="btnsubmit" UseSubmitBehavior="false" runat="server" Text="Submit" OnClientClick="return false;"/>

        </div>

    </form>

</body>

</html>

Above File is JqueryValidation\index.aspx






Comments

Popular posts from this blog

Create a User Registration Form in ASP.NET using SQL Server, Visual Studio 2022 & Bootstrap

Create a Simple Login Form in ASP.NET using Visual Studio 2022

SqlCommand Class ADO.Net | ExecuteNonQuery | ExecuteReader | ExecuteScalar