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>