Validierung funktioniert nicht für dynamisch hinzugefügt Zeilen

Question

Ich bin neu in Jquery. Ich habe die Validierung für die Eingabefelder geschrieben. Und dynamisch die Eingabefelder generieren, wenn Sie auf Zeile hinzufügen klicken. Ich gab den gleichen id Wert zu allen Eingabefeldern. Die neu generierten Zeilen wurden jedoch nicht validiert, wenn ich auf die Schaltfläche klicke.

Wo ich Fehler gemacht habe. Danke im Voraus.

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

Genau wie ich kommentierte, sollten Sie nie verwenden Sie die gleichen IDs für Felder. IDs sollten für Felder eindeutig sein.

Von XHTML 1.0 Spec,

In XML sind Fragment Identifikatoren vom Typ ID, und es kann nur ein einzelnes Attribut des Typs ID pro Element sein. Daher wird in XHTML 1.0 das ID-Attribut als vom Typ ID definiert. Um sicherzustellen, dass die XHTML 1.0-Dokumente gut strukturierte XML-Dokumente sind, MÜSSEN XHTML 1.0 Dokumente das ID-Attribut verwenden, wenn Sie die Fragment-IDs für die oben aufgeführten Elemente definieren. In den HTML-Kompatibilitätsrichtlinien finden Sie Informationen darüber, ob solche Anker abwärtskompatibel sind, wenn XHTML-Dokumente als Medientyp text/html bereitgestellt werden.

Ich habe Ihren Code refaktoriert. Hier ist die Arbeitsdemo.

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

Sie sollten nicht denselben id Eingängen zuweisen, müssen ID eindeutig sein.

zuordnen gleichen Klassennamen für alle Eingänge, die Sie wie validieren möchten:

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

Dies wird auch für dynamisch hinzugefügt Eingänge arbeiten.