CODEWITHSUNDEEP
jqueryvalidation
David Robbins
David Robbins

Reputation: 10046

How do you validate a form with multiple div's using jQuery Validate plugin?

I am using the jQuery Validation plugin and have an issue validating items that are in nested div's in my form:

   <form id="form1" runat="server">
    <div id="theForm">
        html <input type="text" class="required date"/>
        <br />
        aspx <asp:TextBox runat="server" CssClass="required" ID="txtone"></asp:TextBox>
        <br />        
        <div id="subArea"><input type="text" class="required" /></div>    
    </div>
    <asp:Button runat="server" ID="btnSub" Text="Save"  
            onclick="btnSub_Click"/>
    </form>

and my setup with jQuery is:

<script type="text/javascript">
  $( document ).ready( function ()
            {                       
                $('#<%= Form.ClientID %>').validate();
            }
        );

        alert('<%= Form.ClientID %>');
    </script>

The end result is the first two fields are function as expected, but the input field in doe not. Do I have to do something special with selectors or add the field specifically? Also, if I were to dynamically add fields to the dom how can I attach the validate() function to the form again so that I include the new dynamic input fields?

SOLVED

Many SO Cred's go to the God of Rock tvanfosson for pointing out that input tags lacked id and name attributes. Once I added them the validator worked. EXTRA cool is that if you have a client side template, the techinque works there as well:

<script type="text/html" id="template">
        <# 
            var i;       

            for(i=0; i < 2; i++)
            {
                var id="tryit" + i;
        #>
            field: <#= id #> <input type="text" class="required" id="<#= id #>" name="<#= id #>"/>
            <br/>
        <#
            }           
        #>
    </script>

<form id="form1" runat="server">
    <div id="theForm">
        html <input type="text" class="required date" id="htmlText" name="htmlText"/>
        <br />
        aspx <asp:TextBox runat="server" CssClass="required" ID="txtone" name="txtone"></asp:TextBox>
        <br />        
        <div id="subArea"><input type="text" class="required" id="subOne" name="subone"/></div>      
        <div id="newArea"></div>  
    </div>
    <asp:Button runat="server" ID="btnSub" Text="Save"  
            onclick="btnSub_Click"/>
    </form>
    <script type="text/javascript">
        $( document ).ready( function ()
            {   
                var newHTML = parseTemplate($('#template').html(), {"one" : "one"});                
                $('#newArea').html(newHTML);

                $('#<%= Form.ClientID %>').validate();              
            }
        );          

    </script>

Upvotes: 2

Views: 4565

Answers (1)

tvanfosson
tvanfosson

Reputation: 532465

Your code looks correct to me, but I notice that your input fields don't have names. Without looking at the actual code for the validate plugin, I'm not sure if this would cause a problem or not. You might want to try adding names for each of the fields (and id's if appropriate) and see if your behavior changes.

 <input type="text" id="date" name="date" class="required date" />

Upvotes: 4

Related Questions