Read Textboxes inside EditItemTemplate of Gridview and validate using jQuery - asp.net

Question

I have asp.net gridview control on a webform, which i used to add, edit and delete records of invoice list with four fields of AgreementNO(txtRANO), Invoice No(txtInvNo),Dispute Date(txtDisputeDate), Amount(txtInvAmount).User can add, edit and delete records as required.
I'm trying to validate the text boxes inside grid view item template and edit item template using jQuery since either txtInvNo and txtDisputeDate will have a value per record.
I can identify the text boxes in side empty and footer template as it will be single row and the ID of textboxes doesn't change dynamically.
But the ID s of textboxes changes for example txtInvNo_0,txtInvNo_1 and so on depend on number of rows, and jQuery could not identify using $(this).closest("tr").find("[id$=txtRANumber]") method.
I looked for many examples, and suggested to use css class and identifu each textbox with its css class name. I have applied same css class for all textboxes.
is there any proper way to do this, other wise will end up in number of css class as unique class name required. code below.
<asp:GridView ID="grdCNoteRADetailAdd" runat="server" AutoGenerateColumns="false"
ShowFooter="true" CssClass="grdMain" GridLines="None" DataKeyNames="CNRecID"
OnRowEditing="EditRADetail" OnRowUpdating="UpdateRADetail" OnRowCancelingEdit="CancelEditRADetail"
Width="100%">
<HeaderStyle CssClass="grdheader" />
<RowStyle CssClass="grdItem" VerticalAlign="Top" />
<AlternatingRowStyle CssClass="grdaltItem" VerticalAlign="Top" />
<FooterStyle VerticalAlign="Top" />
<Columns>
<asp:TemplateField HeaderText="RA Number" HeaderStyle-Width="25%" ItemStyle-CssClass="grdItemborder">
<ItemTemplate>
<asp:Label ID="lblRANumber" runat="server" Text='<%# Eval("RANumber")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtRANumber" runat="server" Text='<%# Eval("RANumber")%>' CssClass="txtbox1" ValidationGroup="edRa"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="!"
Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationGroup="edRa"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ErrorMessage="!"
Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationExpression="[a-zA-Z0-9\s]+$" ValidationGroup="edRa"></asp:RegularExpressionValidator>
</EditItemTemplate>
<FooterTemplate>
<tr>
<td style="width: 25%;">
<asp:TextBox ID="txtRANumber" runat="server" CssClass="txtbox1" Width="90%"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ErrorMessage="!"
Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationGroup="newNRA"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server" ErrorMessage="!" ValidationGroup="newNRA"
Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationExpression="[a-zA-Z0-9\s]+$"></asp:RegularExpressionValidator>
</td>
<td style="width: 25%;">
<asp:TextBox ID="txtInvNo" runat="server" CssClass="txtbox2" Width="90%" ValidationGroup="newNRA"></asp:TextBox>
<asp:RegularExpressionValidator ID="revInvNo" runat="server"
ErrorMessage="!" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtInvNo" ValidationGroup="newNRA"
ValidationExpression="^(ri|RI|STI|sti|TI|ti|RIR|rir|OSTI|osti)?\d{7,15}$"></asp:RegularExpressionValidator>
</td>
<td style="width: 20%;">
<asp:TextBox ID="txtDisputeDate" runat="server" CssClass="txtbox2JQDP" Width="75%"></asp:TextBox>
</td>
<td style="width: 20%;">
<asp:TextBox ID="txtCreditAmount" runat="server" CssClass="txtbox1" Width="85%" ValidationGroup="newNRA"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="!"
Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtCreditAmount" ValidationGroup="newNRA"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator9" runat="server" ErrorMessage="!" ValidationGroup="newNRA"
Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtCreditAmount" ValidationExpression="^\d+(\.\d{1,2})?$"></asp:RegularExpressionValidator>
</td>
<td style="width: 10%;">
<asp:Button ID="btnAddRF" runat="server" Text="Add" OnClick="AddNewRADetail" ValidationGroup="newNRA"/>
</td>
</tr>
<tr>
<td></td>
<td class="tdsubhead2" style="text-align: center;">Total
</td>
<td>
<asp:Label ID="lblCNoteTotal" runat="server" Text=""></asp:Label>
</td>
<td></td>
</tr>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="25%" HeaderText="Invoice No" ItemStyle-HorizontalAlign="Center"
HeaderStyle-CssClass="grdItemborder" ItemStyle-CssClass="grdItemborder">
<ItemTemplate>
<asp:Label ID="lblInvNo" runat="server" Text='<%# Eval("InvoiceNo")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtInvNo" runat="server" Text='<%# Eval("InvoiceNo")%>' CssClass="txtbox2" Width="95%" ValidationGroup="edRa"></asp:TextBox>
<asp:RegularExpressionValidator ID="revInvNo" runat="server"
ErrorMessage="!" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtInvNo"
ValidationExpression="^(ri|RI|STI|sti|TI|ti|RIR|rir|OSTI|osti)?\d{7,15}$" ValidationGroup="edRa"></asp:RegularExpressionValidator>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="20%" HeaderText="Dispute Date" ItemStyle-HorizontalAlign="Center"
HeaderStyle-CssClass="grdItemborder" ItemStyle-CssClass="grdItemborder">
<ItemTemplate>
<asp:Label ID="lblDispute_Date" runat="server" Text='<%# Eval("Dispute_Date")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblDisputeDate" runat="server" Text='<%# Eval("Dispute_Date")%>' Visible='<%# IIf(Eval("IsInvoice") = True, True, False)%>'></asp:Label>
<asp:TextBox ID="txtDisputeDate" runat="server" CssClass="txtbox2JQDP" Width="75%" Text='<%# Eval("Dispute_Date")%>' Visible='<%# If(Eval("IsInvoice") = True, False, True)%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="20%" HeaderText="Credit Amount" HeaderStyle-CssClass="grdItemborder"
ItemStyle-CssClass="grdItemborder">
<ItemTemplate>
<asp:Label ID="lblCreditAmount" runat="server" Text='<%# Eval("CNAmount")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtCreditAmount" runat="server" Text='<%# Eval("CNAmount")%>' CssClass="txtbox1" Width="90%" ValidationGroup="edRa"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ErrorMessage="!" ValidationGroup="edRa"
Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtCreditAmount"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator8" runat="server" ErrorMessage="!"
Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtCreditAmount" ValidationExpression="^\d+(\.\d{1,2})?$" ValidationGroup="edRa"></asp:RegularExpressionValidator>
</EditItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:TemplateField>
<%--<asp:CommandField ShowEditButton="True" />--%>
<asp:TemplateField ShowHeader="False" HeaderStyle-Width="10%">
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" runat="server" CausesValidation="False" CommandName="Edit"
Text="Edit" ValidationGroup="vgEdit"></asp:LinkButton>
</ItemTemplate>
<EditItemTemplate>
<table style="width: 100%">
<tr>
<td>
<asp:LinkButton ID="lnkUpdate" runat="server" CausesValidation="True" CommandName="Update"
Text="Update" ValidationGroup="edRa"></asp:LinkButton>
</td>
<td>
<asp:LinkButton ID="lnkRemoveRF" runat="server" CommandArgument='<%# Eval("CNRecID")%>'
Text="Delete" OnClick="DeleteRADetail" CausesValidation="false"></asp:LinkButton>
</td>
<td>
<asp:LinkButton ID="lnkCancel" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel"></asp:LinkButton>
</td>
</tr>
</table>
</EditItemTemplate>
<HeaderStyle Width="5%" />
</asp:TemplateField>
<%--<asp:TemplateField HeaderStyle-Width="10%" HeaderStyle-CssClass="grdItemborder" ItemStyle-CssClass="grdItemborder">
<ItemTemplate>
<asp:LinkButton ID="lnkRemoveRF" runat="server" CommandArgument='<%# Eval("CNRecID")%>'
Text="Delete" OnClick="DeleteRADetail" CausesValidation="false"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>--%>
</Columns>
<EmptyDataTemplate>
<tr>
<td class="tdsubhead2" style="width: 25%; text-align: center;">RA Number
</td>
<td class="tdsubhead2" style="width: 25%; text-align: center;">Invoice No
</td>
<td class="tdsubhead2" style="width: 20%; text-align: center;">Dispute Date
</td>
<td class="tdsubhead2" style="width: 20%; text-align: center;">Credit Amount
</td>
<td style="border: 0px solid grey; width: 10%;"></td>
</tr>
<tr>
<td style="text-align: center">
<asp:TextBox ID="txtRANumber" runat="server" CssClass="txtbox1" ValidationGroup="newRa" Width="90%" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ErrorMessage="!"
Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationGroup="newRa"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator10" runat="server"
ErrorMessage="!" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber"
ValidationExpression="[a-zA-Z0-9\s]+$" ValidationGroup="newRa"></asp:RegularExpressionValidator>
</td>
<td style="vertical-align: top; text-align: center">
<asp:TextBox ID="txtInvNo" runat="server" CssClass="txtbox2" ValidationGroup="newRa" Width="90%" />
<asp:RegularExpressionValidator ID="revInvNo" runat="server"
ErrorMessage="!" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtInvNo"
ValidationExpression="^(ri|RI|STI|sti|TI|ti|RIR|rir|OSTI|osti)?\d{7,15}$" ValidationGroup="newRa"></asp:RegularExpressionValidator>
</td>
<td style="vertical-align: top; text-align: center">
<asp:TextBox ID="txtDisputeDate" runat="server" CssClass="txtbox2JQDP" Width="75%"></asp:TextBox>
</td>
<td style="text-align: center">
<asp:TextBox ID="txtCreditAmount" runat="server" CssClass="txtbox1" Width="75%" ValidationGroup="newRa" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server" ErrorMessage="!"
ValidationGroup="newRa" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtCreditAmount"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator12" runat="server"
ErrorMessage="!" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtCreditAmount"
ValidationExpression="^\d+(\.\d{1,2})?$" ValidationGroup="newRa"></asp:RegularExpressionValidator>
</td>
<td style="width: 10%">
<asp:Button ID="btnAddRF" runat="server" Text="Add" OnClick="AddNewRADetail" CommandName="emptyInsert"
CausesValidation="true" CssClass="buttonScreenSpec" ValidationGroup="newRa" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td class="tdsubhead2" style="text-align: center;">Total
</td>
<td>
<asp:Label ID="lblCNoteTotal" runat="server" Text=""></asp:Label>
</td>
<td></td>
</tr>
</EmptyDataTemplate>
</asp:GridView>
JQuery Code Below/
/Add New Record
$("[id$=grdCNoteRADetailAdd] [id$=btnAddRF]").click(function () {
var raRow = $(this).closest("tr");
alert($(this).closest("tr input[type='text']").length);
var txtRaNo = raRow.find("[id$=txtRANumber]");
var txtInvNo = raRow.find("[id$=txtInvNo]");
var txtDisDate = raRow.find("[id$=txtDisputeDate]");
if ($.trim(txtRaNo.val()) != "")
{
if ($.trim(txtInvNo.val()) == "" && $.trim(txtDisDate.val()) == "")
{
var msg = "Both Invoive No and Dispute Date cannot be empty.\nIf system generated invoice is not available, specify the date when was the dispute happend.\n ";
msg += "For example : Date when the tarffic fine was charged directly to customer by police..!"
alert(msg);
return false;
}
}
return true;
});
//Edit Record using Update Link button
//This does not work as txtRANumber,txtInvNo and txtDisputeDate are dynamically gaving index at the end as txtDisputeDate_0,1 etc based on number of rows in the grid
$('#<%=grdCNoteRADetailAdd.ClientID %> a:contains(Update)').click(function () {
var raRow = $(this).closest("tr");
var txtRaNo = raRow.find("[id$=txtRANumber]");
var txtInvNo = raRow.find("[id$=txtInvNo]");
var txtDisDate = raRow.find("[id$=txtDisputeDate]");
alert(txtRaNo.attr("id"));
if ($.trim(txtRaNo.val()) != "") {
if ($.trim(txtInvNo.val()) == "" && $.trim(txtDisDate.val()) == "") {
//alert('fuck2');
var msg = "Both Invoive No and Dispute Date cannot be empty.\nIf system generated invoice is not available, specify the date when was the dispute happend.\n ";
msg += "For example : Date when the tarffic fine was charged directly to customer by police..!"
alert(msg);
return false;
}
}
return true;
});

Answer 1

I have found the answer for the issue and post here, to help others.
Note: 1. Text box placed inside will be created a dynamic ID as "textboxName(number)". So JQuery will not identify the text box using its id.
I added a css class name (same as textbox ID) along with actual css class name.
for example, my textbox ID ="txtRANumber" and CssClass="txtRANumber txtbox1".
here txtbox1 is the css class , and txtRANumber class i added to identify the textbox using its class name using JQuery.Gridview code extract and JQuery code extract are below.
$("[id*=grdCNoteRADetailAdd] [id*=lnkUpdate]").click(function () {
var raNo = $('.txtRANumber').val(); // txtRANumber text box identifiied using its css class name
var invNo = $('.txtInvNo').val();
var disDate = $('.txtbox2JQDP').val();
if ($.trim(raNo) == "") {
var msg="Enter RA number"
alert(msg);
return false;
}
}
return true;
});
<EditItemTemplate>
<asp:TextBox ID="txtRANumber" runat="server" Text='<%# Eval("RANumber")%>' CssClass="txtRANumber txtbox1" ValidationGroup="edRa"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="!"
Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationGroup="edRa"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ErrorMessage="!" Display="Dynamic" CssClass="rqrdtxt" ControlToValidate="txtRANumber" ValidationExpression="[a-zA-Z0-9\s]+$" ValidationGroup="edRa"></asp:RegularExpressionValidator>
</EditItemTemplate>