JSFiddle - React, Tailwind, and code Playground
by Town
HTML
<table id="form">
<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>Try Submit</button>
JavaScript
$('button').click(function() {
var rows = new Array();
$('#form tr').each(function(i) {
var row = new Object();
row.one = ($("[name='scheduledatepick[" + i + "]']", this).val().length > 0 ? 1 : 0);
row.two = $("[name='schedulein[" + i + "]']", this).val() != "--" ? 1 : 0;
row.three = $("[name='location[" + i + "]']", this).val().length > 0 ? 1 : 0;
var filledFieldCount = row.one + row.two + row.three;
if (filledFieldCount > 0 && filledFieldCount < 3) {
rows.push(this);
}
});
if (rows.length > 0){
$(rows).css("background-color", "red");
}
});