验证不适用于动态添加的行

Question

我是jquery的新手。我为输入字段写了验证。当点击添加行时动态生成输入字段。我给所有输入字段赋予了相同的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

就像我评论，你应该从来没有使用相同的ID字段。字段的ID应该是唯一的。

从XHTML 1.0 Spec，

在XML中，片段标识符的类型的ID，并且只能有每个元件类型ID的 单个属性。因此，在XHTML 1.0中，id属性被定义为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为输入，ID必须是唯一的。

分配相同的类名到所有要验证，如输入：

$().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>

这也将动态添加的输入工作。