Question

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

我正在为我的表单使用[jQuery Validation Plugin] [1]。

我在表中有动态生成的表单字段：表的数量取决于用户创建的数量。下表中的一个样本：

<?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});
            });         
    });
});

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

1 个答案: