How to validate asp.net gridview textbox using javascript when updating?

Question

I have a gridview on my aspx page:

<asp:GridView ID="gvPhoneBook" runat="server" AutoGenerateColumns="false" 
            ShowFooter="true" DataKeyNames="PhoneBookID"
            ShowHeaderWhenEmpty="true"

            OnRowCommand="gvPhoneBook_RowCommand" 
            OnRowEditing="gvPhoneBook_RowEditing" OnRowCancelingEdit="gvPhoneBook_RowCancelingEdit"
            OnRowUpdating="gvPhoneBook_RowUpdating" OnRowDeleting="gvPhoneBook_RowDeleting">

            <Columns>
                <asp:TemplateField HeaderText="First Name">
                    <ItemTemplate>
                        <asp:Label Text='<%# Eval("FirstName") %>' runat="server" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtFirstName" Text='<%# Eval("FirstName") %>' runat="server" />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtFirstNameFooter" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Last Name">
                    <ItemTemplate>
                        <asp:Label Text='<%# Eval("LastName") %>' runat="server" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtLastName" Text='<%# Eval("LastName") %>' runat="server" />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtLastNameFooter" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Contact">
                    <ItemTemplate>
                        <asp:Label Text='<%# Eval("Contact") %>' runat="server" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtContact" Text='<%# Eval("Contact") %>' runat="server" />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtContactFooter" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Email">
                    <ItemTemplate>
                        <asp:Label Text='<%# Eval("Email") %>' runat="server" />
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:TextBox ID="txtEmail" Text='<%# Eval("Email") %>' runat="server" />
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:TextBox ID="txtEmailFooter" runat="server" />
                    </FooterTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ImageUrl="~/Images/edit.png" runat="server" CommandName="Edit" ToolTip="Edit" Width="20px" Height="20px"/>
                        <asp:ImageButton ImageUrl="~/Images/delete.png" runat="server" CommandName="Delete" ToolTip="Delete" Width="20px" Height="20px"/>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:ImageButton ImageUrl="~/Images/save.png" runat="server" OnClientClick="return Validate(this);" CommandName="Update" ToolTip="Update" Width="20px" Height="20px"/>
                        <asp:ImageButton ImageUrl="~/Images/cancel.png" runat="server" CommandName="Cancel" ToolTip="Cancel" Width="20px" Height="20px"/>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:ImageButton ImageUrl="~/Images/addnew.png" runat="server" CommandName="AddNew" ToolTip="Add New" Width="20px" Height="20px"/>
                    </FooterTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

I want to validate Email field when updating (It should not be empty).

Here is what I have tried:-

function validate() 
{ 
 if(document.getElementById("<%=txtEmail.ClientID%>").value‌=="")
 { 
 alert("Email Field can not be blank"); 
 document.getElementById("<%=txtEmail.ClientID%>").focus(‌); 
 return false; 
 } 
 return true; 
 }

But I get error as txtEmail does not exist in the current context.

I also used this method:-

<script type="text/javascript">
    function Validate(lnkUpdate) {
     var txtEmail;
     var row = lnkUpdate.parentNode.parentNode;
     txtEmail = row.getElementsByID("txtEmail");

     if (txtEmail.value == null) {
         alert("Email Field can not be blank"); 
     }
     }

I am calling this method on update button but this also not working. How do I do that using javascript? where am i doing wrong?

What's OnClientClick? Why don't you use onclick="Validate(this)"? — Uriel Chami
– Uriel Chami, Commented Jan 17, 2018 at 17:53
@UrielChami I didn't got your point. In the first method when I execute program it says 'txtEmail' does not exist in the current context — rchau
– rchau, Commented Jan 17, 2018 at 17:57

Uriel Chami · Accepted Answer · 2018-01-17 18:02:24Z

2

You can add a class to your button

<EditItemTemplate>
                        <asp:ImageButton ImageUrl="~/Images/save.png" runat="server" class="button_save" CommandName="Update" ToolTip="Update" Width="20px" Height="20px"/>
                        <asp:ImageButton ImageUrl="~/Images/cancel.png" runat="server" CommandName="Cancel" ToolTip="Cancel" Width="20px" Height="20px"/>
                    </EditItemTemplate>

And then listen to the event click of the class in javascript

var buttonSave = document.getElementsByClassName("button_save");

for (var i = 0; i < buttonSave.length; i++) {
    buttonSave[i].addEventListener('click', Validate(buttonSave[i]), false);
}

answered Jan 17, 2018 at 18:02

Uriel Chami

4181 gold badge3 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Uriel Chami Over a year ago

You weren't catching the event correctly, I never heard of "OnClientClick" but I assume it's a ASP net method. And goes to the server, not to the client side. On the other hand 'onclick=""' should've worked, I would expect that to work

VDWWD · Accepted Answer · 2018-01-17 18:03:43Z

0

I think you should look into aspnet Validation Controls.

<asp:TextBox ID="txtEmail" Text='<%# Eval("itemid") %>' runat="server" />
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ErrorMessage="Email Field can not be blank" ControlToValidate="txtEmail"
  ValidationGroup="inGridView"></asp:RequiredFieldValidator>

You have to add the ValidationGroup to the save button also

<asp:ImageButton runat="server" ValidationGroup="inGridView" />

There are several different types and can be manipulated from code behind. See the documentation: https://msdn.microsoft.com/nl-nl/library/bwd43d0x.aspx

answered Jan 17, 2018 at 18:03

VDWWD

35.7k23 gold badges67 silver badges87 bronze badges

2 Comments

rchau Over a year ago

Thanks for your answer, but I have to validate using javascript and that is what the problem

VDWWD Over a year ago

May I ask why? Because you can use those controls in a GridView without having to use <%=txtEmail.ClientID%> and stuff like that. I'ts also easier to maintain. If you really need to use javascript i would recommend a jQuery library like parsley to do all your validation.

Collectives™ on Stack Overflow

How to validate asp.net gridview textbox using javascript when updating?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related