JSFiddle - React, Tailwind, and code Playground

HTML

<form action="queryResult.php" onsubmit="return validate()" method="post" name="displayTimeTable">
<table>

<tr>

<td>
Sort table in =
<select name="SortIn" onchange="validateSortIn()">
<option value="Please Choose">Please Choose</option>
<option value="ASC">Ascending order</option>
<option value="DESC">Descending order</option>
</select>
</td>

<td>
on =
<select name="SortBy" onchange="validateSortBy()">
<option value="Please Choose">Please Choose</option>
<option value="RunnerID">Runner ID</option>
<option value="EventID">Event ID</option>
<option value="Date">Date</option>
<option value="FinishTime">Finish Time</option>
<option value="Position">Position</option>
<option value="CategoryID">Category ID</option>
<option value="AgeGrade">Age Grade</option>
<option value="PB">Personal Best</option>
</select>
</td>

</tr>

<tr>
<td>
Include AgeGrade
<input type="radio" name="IncludeAgeGrade" value="1"/>Yes
<input type="radio" name="IncludeAgeGrade" value="0" checked="checked"/>No
</td>
</tr>

</table>
<hr/>
<input type="submit" name="submit" value="Submit"/>
</form>

JavaScript

function validate()
{
    alert("triggered");
    var errors = '';
	
    errors = errors + validateSortIn();
    errors = errors + validateSortBy();

    if (errors.length > 0)
	{
        alert('Failure!\n\n'
            + 'Your request failed because:\n'
            + errors
            + 'Please try again.');
        return false;
    }
    return true;
}

function validateSortIn()
{
    var sortIn = document.getElementsByName('SortIn')[0].value;
	if (sortIn == 'Please Choose')
	{
	    document.getElementsByName('SortIn')[0].textContent =  "A sort direction is required"
		return '* a sort direction is required\n';
	}
	else
	{
	    return '';
	}
}

function validateSortBy()
{
    var sortBy = document.getElementsByName('SortBy')[0].value;
	var showAge = getShowAge();
	if (sortBy == 'Please Choose')
	{
	    return '* a sort field is required\n';
	}
	elseif (sortBy == 'AgeGrade' &&  showAge == 0)
	{
	    return '* results can only be sorted by Age Grade if included\n';
	}
	else
	{
	    return '';
	}	
}
	
function getShowAge() {
    for (var index = 0; index < document.getElementsByName('IncludeAgeGrade').length; index++)
	{
        if (document.getElementsByName('IncludeAgeGrade')[index].checked)
		{
			return document.getElementsByName('IncludeAgeGrade')[index].value;
        }
    }
}