I have utilized a datatable to create a table where each row contains either an input or select field, with pagination across multiple pages.
The problem arises when the datatable renders 10 rows of HTML elements by default and jQuery validation renders per page as HTML.
I am seeking a solution to implement validation for all cells across all paginations (pages) using jQuery.
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<body>
<table id="banklist">
<tr>
<td>
<input id="bn_0" name="bd[0][bn]" placeholder="Enter Bank Name" value="testbank" aria-required="true" class="valid" aria-invalid="false">
</td>
<td>
<select id="sts_0" class="sts" name="bd[0][sts]" aria-required="true"&rt;
<option value="">Select Status</option>
<option value="Y" selected="">on</option>
<option value="N">off</option>
</select>
</td>
</tr>
<tr>
<td> Another 100 rows with td inputs/selects </td>
</tr>
</table>
</body>
</style>
<script type="text/javascript" src="resources/js/list_newbank.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
$(document).ready(function() {
$('#banklist').DataTable({
scrollX: true,
scrollCollapse: true,
});
});
https://jqueryvalidation.org/ jQuery Validation:
$("#banklist").validate({
errorPlacement: function(error, element) {
var ele_name = element.attr('name');
console.log(ele_name);
$('.valid').attr('style','border : 1px solid #c2bfbf !important');
if($('input,select').hasClass('error')) {
//$('label.error').remove();
$('input.error, select.error').attr('style','border : 1px solid red !important');
error.appendTo( $('.error[name="'+ele_name+'"]').parent('td'));
}
}
});