如何为动态生成的字段创建规则

Question

http://www.kosherjellyfish.com/test/index.php

我正在为我的表单使用 [jQuery 验证插件][1]。

我在 tables 内有动态生成的表单字段：tables 的数量取决于创建的用户数量。以下 table 的示例：

<?php (for $i=1;$i<3;$i++){?> 
<table class="coauthortable">

    <tr>
       <td>Title * </td>
       <td>
          <select name="contactTitle<? echo $i;?> ">
          <option value="">Select Title</option>
          <option value="Dr">Dr</option>
          <option value="Miss">Miss</option>
          <option value="Mr">Mr</option>
          <option value="Mrs">Mrs</option>
          <option value="Ms">Ms</option>
          <option value="Professor">Professor</option>
         </select>
      </td>
    </tr>

    <tr>
      <td>First Name *</td>
      <td><input type="text" name="contactFirstName<? echo $i;?>" style="width:280px;" /></td>
    </tr>


    <!--Actual program has more rows-->

</table>
<?php }  ?>

我希望将验证规则添加到动态生成的输入字段中：似乎我无法在验证方法本身中正确执行此操作，因为我不知道将要生成的实际字段数：

$("#papersubmitform").validate(
        {
        rules:{
            //Can't add rules this way as I do not know how many rows will be generated. 
            contactTitle: {required: true},
            contactFirstName: { required:true},

});

我尝试添加规则，这些规则将在页面加载后添加到 $(document).ready(function() 上，但它似乎不起作用。

$(document).ready(function() {
   $(".coauthortable").each(function(i){ 
            $(this).find(":input").each(function(){ 
                $(this).rules("add",{required:true});
            });         
});

  $("#papersubmitform").validate();         


});

有人对我应该如何将规则添加到动态创建的元素有任何建议吗？

我已经在我自己的服务器上创建了一个示例页面...http://www.kosherjellyfish.com/test/index.php

Answer 1

您只需要按照相反的顺序进行即可：

$(document).ready(function() {
   $("#papersubmitform").validate();         

   $(".coauthortable").each(function(i){ 
            $(this).find(":input").each(function(){ 
                $(this).rules("add",{required:true});
            });         
    });
});

如何为动态生成的字段创建规则

How to create Rules for dynamically generated fields

php

jquery

validation

jquery-plugins