2015-01-12 13 views
1

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

}); 

Я пытался добавить правила, которые будут добавлены на $ (документ) .ready (функция() после загрузки страницы, но это не кажется для работы.

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

ответ

1

Вам просто нужно, чтобы сделать это в обратном порядке:

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

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

Великий, он работает сейчас :) – kosherjellyfish

Смежные вопросы