Introduction
Validation of TextBox is already performed earlier. Now, in this post i will do apply the same validation on the TextBox control. But, at this time TextBox inside in GridView control. So, For this type of problem, i have two solution. Before performed all actions, we should bind the gridview with datasource. Now, we can apply validation on the TextBox, which is inside in FooterRow of GridView. I have a database table, which is used mentioned example:
I-Method (Using RequiredFieldValidator)
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowFooter="true">
<Columns>
<asp:TemplateField HeaderText="Program Id">
<ItemTemplate>
<asp:Label ID="progid" runat="server" Text='<%# Eval("prog_id") %>' />
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="fid" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ControlToValidate="fid" ForeColor="red" ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
By this method we have to attach RequiredField Validator control with the TextBox control.
II-Method(Using JavaScript)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function valiadte() {
var ftid = document.getElementById('<%=((TextBox)GridView1.FooterRow.FindControl("fid")).ClientID %>');
if (ftid.value != '') {
alert("Sucess");
}
else {
alert("field is required");
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowFooter="true">
<Columns>
<asp:TemplateField HeaderText="Program Id">
<ItemTemplate>
<asp:Label ID="progid" runat="server" Text='<%# Eval("prog_id") %>' />
</ItemTemplate>
<FooterTemplate>
<asp:TextBox ID="fid" runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="valiadte();" />
</form>
</body>
</html>
Code generate the following out-- see the video
Download : Full code of program
In the second method, first we access the id of the TextBox with the help of java script function, which is mentioned in the program after that check the value of the Control , if TextBox is empty then generate the alert message on the screen.