Validate Grid view controls with javascript
Hello all I have a grid view which is bot bound with database but it is bound with datatable. Grid view has an empty row when first time the page is loaded. I am using this grid to insert data in datab开发者_JAVA百科ase. Whenever user inserts a data in first row and clicks on "Add New Row" button, a new row is created. Now my problem is when user clicks on button I want to validate if there is any empty controls. So that I want to add javascript. I have trid many scripts but its not working. please guide me.
My grid view is as bellow.
Qualification Detail
Qualification --Select-- </asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Percentage
</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="percentageBox" clientID="percentageBox" name="percentageBox" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Passing Year
</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="yearBox" clientID="yearBox" name="yearBox" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Institute Name
</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="instituteNameBox" clientID="instituteNameBox" name="instituteNameBox" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White"
HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" ForeColor="#333333" Font-Bold="True" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="addRowBtn" EventName="Click"/>
</Triggers>
</asp:UpdatePanel>
<br />
</td>
</tr>
I created a sample for validation in grid-view using J Query.You can take help from this one.
JQUERY:
var vIsProcess = true;
$("#btnSubmitNew").click(function(){
$("table[id$='gvCommentSample']").find("input:text").each(function(){
if($(this).val()=="")
{
alert("Please fill the required field");
$(this).focus();
vIsProcess= false;
return false;
}
else
{
vIsProcess= true;
}
});
if(!vIsProcess)
return false;
else
return true;
});
ASPX:
<asp:GridView ID="gvCommentSample" runat="server" ShowFooter="false" Width="50%" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField HeaderText="Code">
<ItemTemplate>
<asp:TextBox ID="txtCode" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnSubmitNew" runat="server" Text="Submit" />
CLICK ON THIS LINK TO SEE THE DEMO
精彩评论