validate dynamically added input types in a row of table

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.

what are you currently using for validation? and what type of the validation you need — Thorin
– Thorin, Commented May 26, 2016 at 6:31
Use classes instead of Ids and validate referring to class name and $this object — Anupam
– Anupam, Commented May 26, 2016 at 6:37
@Thorin - I want jquery validation here like by checking the input type value , if its null , it will show the error. — N2J
– N2J, Commented May 26, 2016 at 6:40
For that you need to show in your post what kind of validation you are doing — Anupam
– Anupam, Commented May 26, 2016 at 6:42

Thorin · Accepted Answer · 2016-05-26 06:50:51Z

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

answered May 26, 2016 at 6:50

Thorin

2,0341 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pawan Lakhara · Accepted Answer · 2016-05-26 07:11:05Z

1

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

https://jsfiddle.net/ffgbvsg0/

answered May 26, 2016 at 7:11

Pawan Lakhara

1,1404 gold badges16 silver badges30 bronze badges

Comments

Parag Datar · Accepted Answer · 2016-05-26 06:43:10Z

0

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

answered May 26, 2016 at 6:43

Parag Datar

595 bronze badges

Collectives™ on Stack Overflow

validate dynamically added input types in a row of table

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related