Validate At-least one TextBox from Multiple TextBoxes in ASP.Net using jQuery.

In this article, we learn how to validate at least one textbox from multiple textboxes in asp.net using Jquery.

 


Source code:

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

<!DOCTYPE html>

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

<head runat="server">

    <title>Validate At-least one TextBox from Multiple TextBoxes in ASP.Net using jQuery</title>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

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

 <div class="container">

            <h2>Address Proofs (At-least one)</h2>

 

            <div class="form-group">

                Passport Number

                    <asp:TextBox ID="txtPassport" runat="server" CssClass="form-control"></asp:TextBox>

            </div>

            <div class="form-group">

                Aadhar Number

                    <asp:TextBox ID="txtAadhar" runat="server" CssClass="form-control"></asp:TextBox>

            </div>

            <div class="form-group">

                PAN Number

               

                    <asp:TextBox ID="txtPAN" runat="server" CssClass="form-control"></asp:TextBox>

            </div>

            <div class="form-group">

 

 

                <asp:Label ID="lblMessage" runat="server" Style="color: Red; visibility: hidden;">

                Please enter at-least one Address proof.

               

                </asp:Label>

 

            </div>

 

            <div class="form-group">

 

                <asp:Button ID="btnSubmit" Text="Submit" runat="server" CssClass="btn btn-primary" />

            </div>

        </div>

    </form>

 

    <script type="text/javascript">

        $(function () {

            $("[id*=btnSubmit]").on("click", function () {

                //Referencing and fetching the TextBox values.

                var passport = $("[id*=txtPassport]").val();

                var aadhar = $("[id*=txtAadhar]").val();

                var pan = $("[id*=txtPAN]").val();

 

                var isValid = false;

                //Check if Passport Number is not blank.

                if (passport.trim() != "") {

                    isValid = true;

                }

 

                //Check if Aadhar Number is not blank.

                if (aadhar.trim() != "") {

                    isValid = true;

                }

 

                //Check if PAN Number is not blank.

                if (pan.trim() != "") {

                    isValid = true;

                }

 

                //Show or hide Label based on isValid variable.

                $("[id*=lblMessage]").css("visibility", !isValid ? "visible" : "hidden");

                return false;

            });

        });

    </script>

</body>

</html>

 

 

Validate At-least one TextBox from Multiple TextBoxes in ASP.Net using jQuery.  Validate At-least one TextBox from Multiple TextBoxes in ASP.Net using jQuery. Reviewed by NEERAJ SRIVASTAVA on 7:00:00 PM Rating: 5

No comments:

Powered by Blogger.