テーブルの行に動的に追加された入力タイプを検証する

Question

ボタンクリックイベントのテーブルの行にある動的に追加された入力タイプフィールドを検証しようとしています。非常に最初の入力型フィールドはIDを持っているので、私はそれにバリデーションを置くことができます。しかし、テーブルに動的に行を追加すると、これらの入力タイプの検証方法がわかりません。

HTML：

<table class="table table-bordered table-hover" id="tab_logic"> 
       <thead> 
        <tr> 

         <th class="text-center">Channel Group Name 
         </th> 
         <th class="text-center">Description 
         </th> 

        </tr> 
       </thead> 
       <tbody> 
        <tr id='addr0'> 

         <td id="CGN"> 
          <input type="text" id="channelgrpName" name='channelgrpName' placeholder='Channel Group Name' class="form-control" /> 
         </td> 
         <td id="DES"> 
          <input type="text" id="description" name='description' placeholder='Description' class="form-control" /> 
         </td> 

        </tr> 
        <tr id='addr1'></tr> 
       </tbody> 
      </table> 

のjQuery：事前に

$(document).ready(function() { 

    var i = 1; 
    $("#add_row").click(function() { 

     $('#addr' + i).html("<td><input name='name" + i + "' type='text' placeholder='Channel Group Name' class='form-control' style='width:50%' /> </td><td><input name='mail" + i + "' type='text' placeholder='Description' class='form-control' style='width:50%'></td>"); 

     $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>'); 
     i++; 
    }); 
    $("#delete_row").click(function() { 
     if (i > 1) { 
      $("#addr" + (i - 1)).html(''); 
      i--; 
     } 
    }); 
}); 

$('#btnSave').click(function() { 

// what should i to do here to validate dynamically added input types in row 

}); 

感謝。

Answer 1

にクリックリスナーをバインド：

$('#btnSave').click(function() { 
    var validate = true; 
    $('#tab_logic').find('tr input[type=text]').each(function(){ 
    if($(this).val() == ""){ 
     validate = false; 
    } 
    }); 
    if(validate){ 
    alert("Form is validate") 
    return true;// you can submit form or send ajax or whatever you want here 
    } else { 
    alert("please fill all the details") 
    return false; 

    } 
}); 

Js Fiddle for check blank fileds

そして、あなたはより多くの検証が必要な場合を検証するためにいくつかのjsプラグインを使用してください

あなたが現在検証のために使用しているもの

jQuery-Validation-Engine

Answer 2

idsはまったく必要ありません。

最初の行に新しい行を追加するときは、たとえば、added-rowのクラスを付けます。

そして、あなただけが必要な場合はちょうどこのよう空白

確認し、これを試してみてください#tab_logic tbody tr.added-row

Answer 3

please check this link i hope this will helpful for you. 

https://jsfiddle.net/ffgbvsg0/