Hi all I need some advice/code help with a problem I am having. Not quite sure which technique to use to solve this.
I have lots of rows in a table each row can have 1-3 fields (dropdowns) and a button. I haven’t wrapped it around a form tag because it only takes the values and stores it in localStorage.
Here’s my problem, when I press a button on any row I need to see if any of the dropdowns were empty, if not get the value using javascript.
What would be a good way to ‘validate’ each row without having to explicitly write down its own validation criteria.
example psuedocode (ish):
If button is pressed check if closest fields are not empty on same row
Here is what the table rows look like as an example:
<tr>
<th>options 1</th>
<th>option 2</th>
<th>option 3</th>
<th>button</th>
</tr>
<tr>
<td>
<select name="option1">
<option value="" selected>Choose one
<option value="paper">Paper
</select>
</td>
<td>
<select name="option2">
<option value="" selected>Choose one
<option value="paper">Rock
</select>
</td>
<td>No 3rd o</td>
<td><input type="button" value="add"></td>
</tr>
<tr>
<td>
<select name="option1">
<option value="" selected>Choose one
<option value="paper">Paper
</select>
</td>
<td>
<select name="option2">
<option value="" selected>Choose one
<option value="paper">Rock
</select>
</td>
<td>
<select name="option3">
<option value="" selected>Choose one
<option value="scissors">Scissors
</select>
</td>
<td><input type="button" value="add"></td>
</tr>
I suppose I can check on click if any of the closest inputs are empty, however because it could be different number of inputs I am not sure entirely how to validate it.
Any help would be appreciated.