JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<table id="Table-02" class="Table" style="width:1075px;" bordercolor="#000000" border="1" cellspacing="0">
<thead>
<tr id="DAU207-header" style="height:040px">
<th align="center">
<div style="width:065px">Num</div>
</th>
<th align="center">
<div style="width:285px">Type</div>
</th>
<th align="center">
<div style="width:285px">Label</div>
</th>
<th align="center">
<div style="width:105px">Unit</div>
</th>
<th align="center">
<div style="width:120px">Value</div>
</th>
<th align="center">
<div style="width:070px">Scale</div>
</th>
<th align="center">
<div style="width:070px">Source</div>
</th>
</tr>
</thead>
<tbody>
<tr id="DAU207-0">
<td align="center">0</td>
<td align="center">Text</td>
<td align="center">Label 1</td>
<td align="center">Miles</td>
<td align="center">2.740000</td>
<td align="center">
<input type="text" name="Scale" class="scaleValidation" value="1.000" style="width:80%;">
</td>
<td align="center">
<input type="text" name="Source" class="sourceValidation" value="0" style="width:80%;">
</td>
</tr>
<tr id="DAU207-1">
<td align="center">1</td>
<td align="center">Text</td>
<td align="center">Label 2</td>
<td align="center">Kilometres</td>
<td align="center">27.320000</td>
<td align="center">
<input...
CSS
.empty {
border: 1px solid red;
}
JavaScript
$(document).ready(function () {
$('#ProcessNow').click(function (e) {
var isValid = true;
$('input[type="text"]').each(function () {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).addClass('empty');
} else {
$(this).removeClass('empty');
}
});
});
});