Dynamic adding of tr not working

Question

You can see the sample. It was not validated.

I just created the same with some validation. Validation was working but adding a row was not working.

Can't identify where i did mistake. Help this. Thanks in advance.

$(document).ready(function () {
    $("#mobile").keypress(function (e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            return false;
        }
    });
});


$(document).on('click', '#add_row', function () {

    var a = $("#name").val();
    var b = $("#country").val();
    var c = $("#mail_id").val();
    var d = $("#mobile").val();


    if (a == "") {
        $("#name").addClass("error");
    }
    else {
        $("#name").removeClass("error");
    }

    if (b == "") {
        $("#country").addClass("error");
    }
    else {
        $("#country").removeClass("error");
    }

    if (c == "") {
        $("#mail_id").addClass("error");
    }
    else {
        $('#mail_id').focusout(function () {
            $('#mail_id').filter(function () {
                var email = $('#mail_id').val();
                var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                if (!emailReg.test(email)) {
                    $("#mail_id").addClass("error");
                    return false;
                } else {
                    $("#mail_id").removeClass("error");
                }
            });
        });
    }

    if (d == "") {
        $("#mobile").addClass("error");
    }
    else {
        $("#mobile").removeClass("error");
    }

    var i = 1;
    if (a || b || c || d == '') {
        i = 1;
    }
    else {
        $('#addr' + i).html("<td><input name='checkbo" + i + "' type='checkbox' placeholder='' class='check'  /></td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><select name='country" + i + "' class='form-control'><option value=''>select an option</option><option value='afghan'>Afghanistan</option><option value='albania'>Albania</option></select></td><td><input  name='mail" + i + "' type='text' placeholder='Mail'  class='form-control input-md'></td><td><input  name='mobile" + i + "' type='text' placeholder='Mobile'  class='form-control input-md'></td>");

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

.error{
    border: 1px solid red;
    transition: border-color .25s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
   <div class="row clearfix">
     <div class="col-md-12 column">
       <table class="table table-bordered table-hover" id="tab_logic">
                 <thead>
                   <tr >
                                <th>

                                </th>
                                <th class="text-center">
                                    #
                                </th>
                                <th class="text-center">
                                    Name
                                </th>
                                <th class="text-center">
                                    Mail
                                </th>
                                <th class="text-center">
                                    Mobile
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id='addr0'>
                                <td>
                                    <input type="checkbox" class="check_0">
                                </td>
                                <td>
                                    <input type="text" name='name0'  placeholder='Name' class="form-control name" id="name" required>
                                </td>
                                <td>
                                    <select id="country" name="country" class="form-control"> 
                                        <option value="">select an option</option>
                                        <option value="Afghanistan">Afghanistan</option>
                                        <option value="Albania">Albania</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="text" name='mail0' placeholder='Mail' class="form-control" id="mail_id" required>
                                </td>
                                <td>
                                    <input type="text" name='mobile0' placeholder='Mobile' class="form-control" id="mobile" required>
                                </td>
                            </tr>
                            <tr id='addr1'></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
        </div>

Answer 1

You need to provide a comparison value for each and every variable in if statement like

 if (a == '' || b == ''|| c == ''|| d == '') {

    i = 1;
}

If you write it like

if (a || b || c || d == '') {

    i = 1;
}

what it means it that it should check that a, b, c should not be null and d is not empty.

$(document).ready(function (a, b, c,d) {
    $("#mobile").keypress(function (e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            return false;
        }
    });

});

function validate() {
	var a = $("#name").val();
    var b = $("#country").val();
    var c = $("#mail_id").val();
    var d =  $("#mobile").val();
    console.log('in validate');
    if (a == "") {
        $("#name").addClass("error");
		return false;
    }
    else {
        $("#name").removeClass("error");
    }

    if (b == "") {
        $("#country").addClass("error");
		return false;
    }
    else {
        $("#country").removeClass("error");
		
    }
  
   if (d == "") {
        $("#mobile").addClass("error");
		return false;
    }
    else {
        $("#mobile").removeClass("error");
		
    }

    if (c == "") {
        $("#mail_id").addClass("error");
		return false;
    }
    else {
           
                var email = $('#mail_id').val();
                var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                if (!emailReg.test(email)) {
                    $("#mail_id").addClass("error");
                    console.log('in error');
					return false;
                } else { 
                    $("#mail_id").removeClass("error");
					return true;
                }
           
            
    }
}

$(document).on('click', '#add_row', function () {
 
    var flag = validate();
    var i = 1;
    console.log(flag);
    if (flag == false) {
        i = 1;
    }
    else {
        console.log('adding row');
        $('#addr' + i).html("<td><input name='checkbo" + i + "' type='checkbox' placeholder='' class='check'  /></td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><select name='country" + i + "' class='form-control'><option value=''>select an option</option><option value='afghan'>Afghanistan</option><option value='albania'>Albania</option></select></td><td><input  name='mail" + i + "' type='text' placeholder='Mail'  class='form-control input-md'></td><td><input  name='mobile" + i + "' type='text' placeholder='Mobile'  class='form-control input-md'></td>");
        
        $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
        i++;
    }

 
     $("#delete_row").click(function () {
        if (i > 1) {
            $("#addr" + (i - 1)).html('');
             i--;
        }
    });
});

.error{
    border: 1px solid red;
    transition: border-color .25s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
   <div class="row clearfix">
     <div class="col-md-12 column">
       <table class="table table-bordered table-hover" id="tab_logic">
                 <thead>
                   <tr >
                                <th>

                                </th>
                                <th class="text-center">
                                    #
                                </th>
                                <th class="text-center">
                                    Name
                                </th>
                                <th class="text-center">
                                    Mail
                                </th>
                                <th class="text-center">
                                    Mobile
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id='addr0'>
                                <td>
                                    <input type="checkbox" class="check_0">
                                </td>
                                <td>
                                    <input type="text" name='name0'  placeholder='Name' class="form-control name" id="name" required>
                                </td>
                                <td>
                                    <select id="country" name="country" class="form-control"> 
                                        <option value="">select an option</option>
                                        <option value="Afghanistan">Afghanistan</option>
                                        <option value="Albania">Albania</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="text" name='mail0' placeholder='Mail' class="form-control" id="mail_id" required>
                                </td>
                                <td>
                                    <input type="text" name='mobile0' placeholder='Mobile' class="form-control" id="mobile" required>
                                </td>
                            </tr>
                            <tr id='addr1'></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
        </div>

Answer 2

Change the if condition like this if (!a || !b || !c || !d)

$(document).ready(function () {
    $("#mobile").keypress(function (e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            return false;
        }
    });
});


$(document).on('click', '#add_row', function () {

    var a = $("#name").val();
    var b = $("#country").val();
    var c = $("#mail_id").val();
    var d = $("#mobile").val();


    if (a == "") {
        $("#name").addClass("error");
    }
    else {
        $("#name").removeClass("error");
    }

    if (b == "") {
        $("#country").addClass("error");
    }
    else {
        $("#country").removeClass("error");
    }

    if (c == "") {
        $("#mail_id").addClass("error");
    }
    else {
        $('#mail_id').focusout(function () {
            $('#mail_id').filter(function () {
                var email = $('#mail_id').val();
                var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                if (!emailReg.test(email)) {
                    $("#mail_id").addClass("error");
                    return false;
                } else {
                    $("#mail_id").removeClass("error");
                }
            });
        });
    }

    if (d == "") {
        $("#mobile").addClass("error");
    }
    else {
        $("#mobile").removeClass("error");
    }

    var i = 1;
    if (!a || !b || !c || !d) {
        i = 1;
    
    }
    else {
   
        $('#addr' + i).html("<td><input name='checkbo" + i + "' type='checkbox' placeholder='' class='check'  /></td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md'  /> </td><td><select name='country" + i + "' class='form-control'><option value=''>select an option</option><option value='afghan'>Afghanistan</option><option value='albania'>Albania</option></select></td><td><input  name='mail" + i + "' type='text' placeholder='Mail'  class='form-control input-md'></td><td><input  name='mobile" + i + "' type='text' placeholder='Mobile'  class='form-control input-md'></td>");

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

.error{
    border: 1px solid red;
    transition: border-color .25s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
   <div class="row clearfix">
     <div class="col-md-12 column">
       <table class="table table-bordered table-hover" id="tab_logic">
                 <thead>
                   <tr >
                                <th>

                                </th>
                                <th class="text-center">
                                    #
                                </th>
                                <th class="text-center">
                                    Name
                                </th>
                                <th class="text-center">
                                    Mail
                                </th>
                                <th class="text-center">
                                    Mobile
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id='addr0'>
                                <td>
                                    <input type="checkbox" class="check_0">
                                </td>
                                <td>
                                    <input type="text" name='name0'  placeholder='Name' class="form-control name" id="name" required>
                                </td>
                                <td>
                                    <select id="country" name="country" class="form-control"> 
                                        <option value="">select an option</option>
                                        <option value="Afghanistan">Afghanistan</option>
                                        <option value="Albania">Albania</option>
                                    </select>
                                </td>
                                <td>
                                    <input type="text" name='mail0' placeholder='Mail' class="form-control" id="mail_id" required>
                                </td>
                                <td>
                                    <input type="text" name='mobile0' placeholder='Mobile' class="form-control" id="mobile" required>
                                </td>
                            </tr>
                            <tr id='addr1'></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
        </div>