Проверка не работает для динамически добавленных строк

Question

Я новичок в jquery. Я написал подтверждение для полей ввода. И динамически генерируя поля ввода при нажатии кнопки add. Я дал то же значение id для всех полей ввода. Но новые сгенерированные строки не проверялись при нажатии кнопки.

Где я сделал ошибку. Заранее спасибо.

$(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").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' id='name'/> </td><td><select name='country" + i + "' class='form-control' id='country'><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' id='mail_id'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md' id='mobile'></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"> 
 
            Address 
 
           </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' 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

Как и я, вы должны never использовать те же идентификаторы для полей. Идентификаторы должны быть уникальными для полей.

От XHTML 1.0 Spec,

В XML идентификаторы фрагмента имеют тип ID, и может быть только одна атрибут типа ID на элемент. Поэтому в XHTML 1.0 атрибут id определяется как идентификатор типа. Чтобы гарантировать, что Документы XHTML 1.0 являются хорошо структурированными XML-документами, документы XHTML 1.0 ДОЛЖНЫ использовать атрибут id при определении идентификаторов фрагментов по перечисленным выше элементам. См. Руководство по совместимости HTML для получения информации об обеспечении того, чтобы такие якоря были обратно совместимы, когда обслуживает документы XHTML как текст типа текста/html.

Я переработал ваш код. Вот рабочая демонстрация.

https://jsfiddle.net/4onh3nrx/1/

HTML

<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"> 
          Address 
         </th> 
         <th class="text-center"> 
          Mobile 
         </th> 
         <th class="text-center"> 
          Action 
         </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 country"> 
           <option value="">select an option</option> 
           <option value="Afghanistan">Afghanistan</option> 
           <option value="Albania">Albania</option> 
          </select> 
         </td> 
         <td> 
          <input type="text" name='mail0' class="form-control mail_id" id="mail_id" required> 
         </td> 
         <td> 
          <input type="text" name='mobile0' placeholder='Mobile' class="form-control mobile" id="mobile" required> 
         </td> 
         <td> 
          <a href="#" class="btn btn-warning add-row"> 
           <i class="glyphicon glyphicon-plus"></i> 
          </a> 
         </td> 
        </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> 

JS

<script> 
    $(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', '.delete-row', function(){ 
     $(this).closest('tr').remove(); 
    }); 

    $(document).on('click', '.add-row', function(){ 
     var tr = $(this).closest('tr'); 
     var field = [ 
      '.name', '.country', '.mail_id', '.mobile' 
     ]; 
     console.log(tr); 
     var flag = false; 
     for(var i = 0; i < field.length; i++) { 
      var ele = $.trim($(tr).find(field[i]).val()); 
      console.log(ele); 
      console.log($(tr).find(field[i])); 
      if(!ele.length) { 
       flag = true; 
       $(tr).find(field[i]).addClass('error'); 
      } else { 
       $(tr).find(field[i]).removeClass('error'); 
      } 
     } 

     if (!flag) { 
      var html = "<tr><td><input name='checkbo" + i + "' type='checkbox' placeholder='' class='check' /></td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control name input-md'/> </td><td><select name='country" + i + "' class='form-control country'><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='mail_id form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md mobile'></td><td><a href='#' class='btn btn-warning add-row'><i class='glyphicon glyphicon-plus'></i></a><a href='#' class='btn btn-danger delete-row'><i class='glyphicon glyphicon-minus'></i></a></td></tr>"; 
      $(html).insertAfter(tr); 
     } 
    }); 
</script> 

Answer 2

Не следует назначать же id входам, идентификатор должен быть уникальным.

Assign же имя класса для всех входов, которые вы хотите проверить, как:

$().ready(function() { 
 
    $('#div1').hide(); 
 
    $('#btn1').click(function() { 
 
     $('.class1').each(function() { 
 
      $('#div1').hide(); 
 
      if ($(this).val() == "") { 
 
       $('#div1').show(); 
 
       return false; 
 
      } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="div1">Error</div> 
 
<input class="class1"/> 
 
<input class="class1"/> 
 
<input class="class1"/> 
 
<button id="btn1">Click here</button>

Это также будет работать для динамически добавляемых входов.