验证表格行中动态添加的输入类型

Question

I am trying to validate the dynamically added input type field which are in a row of a table on button click event. The very first input type field has an ID so I am able to put a validation on it. But when I add more rows in the table dynamically , I don't know how to validate those input types of rows.

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

});

Thanks in advance.

Answer 1

Just try this, if you need only check blanks

Like this:

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

And if you need more validation just use some js plugins to validate like

jQuery-Validation-Engine

Answer 2

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

https://jsfiddle.net/ffgbvsg0/

Answer 3

You don't need ids at all.

In your first row and when you append new rows, give them a class for eg: added-row .

And bind the click listener on #tab_logic tbody tr.added-row