jquery - 如何使用 jQuery Validate 插件验证具有多个 div 的表单？

Question

我正在使用jQuery Validation plugin并且在验证我的表单中嵌套 div 中的项目时遇到问题:

   <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>

我对 jQuery 的设置是:

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

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

最终结果是前两个字段按预期工作，但输入字段却没有。我是否必须对选择器做一些特殊的事情或专门添加该字段？另外，如果我要向 dom 动态添加字段，如何再次将 validate() 函数附加到表单，以便包含新的动态输入字段？

已解决

许多 SO Cred 都向摇滚之神 tvanfosson 指出输入标签缺少 id 和 name 属性。一旦我添加了它们，验证器就开始工作了。额外酷的是，如果您有客户端模板，该技术也可以在那里使用:

<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>

Answer 1

您的代码对我来说看起来是正确的，但我注意到您的输入字段没有名称。如果不查看验证插件的实际代码，我不确定这是否会导致问题。您可能想尝试为每个字段添加名称(如果合适的话还可以添加 ID)，看看您的行为是否会发生变化。

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