Dari artikel sebelumnya yang pernah kita bahas adalah bagaimana cara membuat validasi inputan nilai quantity harus lebih kecil daripada nilai stock pada sebuah single form. Untuk kali ini kita akan membahas bagaimana jika form inputnya lebih dari satu seperti pada inputan data transaksi pada sebuah tabel.

• Code HTML

<table>
  <tr>
    <td>Stock</td>
    <td>Qty</td>
  </tr>
  <tr>
    <td><input data-index='0' type="number" name="stock" value="2" readonly></td>
    <td><input data-check data-stock='0' type="number" name="qty"></td>
  </tr>
  <tr>
    <td><input data-index='1' type="number" name="stock" value="25" readonly></td>
    <td><input data-check data-stock='1' type="number" name="qty"></td>
  </tr>
</table>

• Code Javascript

<script type="text/javascript">
		document.querySelectorAll('input[data-check]').forEach(el => {
		el.addEventListener('change', () => {
			const stock = document.querySelector('input[data-index="'+el.dataset.stock+'"]');
			if (parseInt(el.value) > parseInt(stock.value)) {
			alert("Qty More Than Stock!");
			el.value = 0;
			}
		});
		});
</script>

Script diatas akan melakukan validasi pada sebuah inputan yang ada pada tabel.