How to get jquery data validator to work with Asp.net gridview

Question

I've been trying to implement the jquery validator that is the suggested answer here: jQuery Validation plugin in ASP.NET Web Forms

but in this and every other example I've found it requires that the elements to be validated are in a form. This may be a newbie question, but I have an asp:textbox (rather than an input) inside an asp:gridview and I can't get the validation to work. Is there a way to nest some of this in a form or do one of these asp functions generate a form automatically in html?

If it helps, here is the jquery code I'm using and my gridview:

 <script type = "text/javascript">
 $(function() {     
 // You can specify some validation options here but not rules and messages
      $('form').validate();
      // Add a custom class to your name mangled input and add rules like this     
      $('textbox[id$=NPI]').rules('add', {
          required: true,
          messages: {
              required: 'Some custom message for the username required field'
          }
       });
       }); 
    </script>

 <div style="overflow:auto; height:300px;">
<asp:GridView ID="SetRules" runat="server" AutoGenerateColumns="False" DataSourceID="AttributesRules" OnDataBound="Anchor_Changed"
    class="styleGrid archGrid validation" AlternatingRowStyle-CssClass = "styleGridAlt" DataKeyNames="banner, pricinggroupkey, attribute, tieranchor, tierother">
    <Columns>                                               
    <asp:TemplateField HeaderText="New Price Index" SortExpression="NewPriceIndex">               
            <ItemTemplate>
                <asp:TextBox ID="NPI" class="NumVal" runat="server" 
                    Text='<%# Bind("NewPriceIndex", "{0:N2}") %>'></asp:TextBox>
            </ItemTemplate>  
        </asp:TemplateField>

    <asp:TemplateField HeaderText="New Index Range" SortExpression="NewIndexRange">               
            <ItemTemplate>
                <asp:TextBox ID="NIR" class="NumVal" runat="server" 
                    Text='<%# Bind("NewIndexRange", "{0:N2}") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>           
                </Columns>
</asp:GridView>
</div>

score 0 · Accepted Answer · answered Jan 24 '12 at 18:58

By default your ASP.NET code is going to render inside a set of FORM tags (asp.net requirement) and your TextBox elements are going to render into "Input" elements. Look at your rendered page's HTML to see what the output looks like in a browser. Your selector should reference the ASP.NET auto generate ID, using the following syntax below.

$('#<%= NIR.ClientID %>')

Don't forget to include the "#" symbol before the ASP.NET code since your using a jQuery ID selector.

How to get jquery data validator to work with Asp.net gridview

1 Answers1