0

I have a table and can add rows by clicking add button.Quantity and item name mandatory fields.Dynamically appended row's validation not working.First row showing the validation.But added rows not showing validaton.

$("#frmGroupMaster").validate({
  errorClass: "has-error",
  pendingClass: "has-warning",
  validClass: "has-success",
  rules: {
    selectItem: "required",
    Quantity: "required",
  },
  messages: {
    selectItem: "please enter atleast one item",
    Quantity: "please enter the quantity",
  }
});

$('#btnAdd').click(function(event) {
  if ($("#frmGroupMaster").valid()) {
    var parentItemMaster = '<tr><td class="btnItem">' + $($($(this).closest("tr").find(".selectItem")).parent()).html() + '</td>' +
      '<td><input type="text" class="form-control txtBarcode"  readonly="true"/></td>' +
      '<td><input type="text" class="form-control txtQty " name="Quantity"/></td>' +
      '<td><input type="text" class="form-control txtPrice"  readonly="true"/></td>' +
      '<td><input type="text" class="form-control txtTotal"  disabled="disabled"/></td>' +
      '<td><input type="button" value="Delete" class="form-control btn btn-danger btndelete" id="btndelete" /></td></tr>';
    $("#tblGroupItemDetails tbody").append(parentItemMaster);
  }

  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<form id="frmGroupMaster">
<table class="table table-bordered table-hover table-condensed table table-responsive GroupItemDetails" id="tblGroupItemDetails">
  <thead class="small">
    <tr>
      <th>Item Name</th>
      <th>Barcode</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr class="tdItemMaster">
      <td class="btnItem">
        <select class="form-control selectItem" name="selectItem">
          <option value="">Select</option>
          <option value="ItemID1">ItemName 1</option>
          <option value="ItemID2">ItemName 2</option>
        </select>
      </td>
      <td class="btnBarcode">
        <input type="text" class="form-control txtBarcode" readonly="true" />
      </td>
      <td>
        <input type="text" class="form-control txtQty" name="Quantity" />
      </td>
      <td class="txtPrice">
        <input type="text" class="form-control txtPrice" readonly="true" />
      </td>
      <td class="btnTotal">
        <input type="text" class="form-control txtTotal" disabled="disabled" />
      </td>
      <td>
        <input type="button" value="Add" class="form-control btn btn-success" id="btnAdd" />
      </td>
    </tr>
  </tbody>
</table>
</form>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Jasmine
  • 25
  • 4

0 Answers0