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>
Reviewed by NEERAJ SRIVASTAVA
on
7:00:00 PM
Rating:
No comments: