JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" id="scheduler">
<table class="table sds">
<tr>
<td>
<input type='datepick' name='scheduledatepick[0]' />
<select name='schedulein[0]'>
<option>--</option>
<option>Selected</option>
</select>
<input type='text' name='location[0]' />
</td>
</tr>
<tr>
<td>
<input type='datepick' name='scheduledatepick[1]' />
<select name='schedulein[1]'>
<option>--</option>
<option>Selected</option>
</select>
<input type='text' name='location[1]' />
</td>
</tr>
<tr>
<td>
<input type='datepick' name='scheduledatepick[2]' />
<select name='schedulein[2]'>
<option>--</option>
<option>Selected</option>
</select>
<input type='text' name='location[2]' />
</td>
</tr>
</table>
<button>Validate!</button>
</form>
CSS
.error { background-color: red; }
JavaScript
$('.table').click(function() {
// set up an array to store the invalid rows
var rows = new Array();
$('table tr')
// reset all rows before we validate
.removeClass("error")
// loop over each row
.each(function(i) {
// work out whether the fields are completed or not
var filledFieldCount = 0;
filledFieldCount += $("[name='scheduledatepick[" + i + "]']", this).val().length > 0 ? 1 : 0;
filledFieldCount += $("[name='schedulein[" + i + "]']", this).val() !== "--" ? 1 : 0;
filledFieldCount += $("[name='location[" + i + "]']", this).val().length > 0 ? 1 : 0;
// if the total completed fields for this row
// is greater than none and less than all
// then add the row to the invalid rows list
if (filledFieldCount > 0 && filledFieldCount < 3) {
rows.push(this);
}
});
// finally, change the background of the
// rows to mark them as invalid
if (rows.length > 0){
$(rows).addClass("error");
}
});