我需要对下面提到的 HTML 进行一些验证,其中存在三行记录。在这三个表格行中有两个可输入字段 - 一个选择列表(“原因”字段)以及一个文本区域项(“评论”字段)。
对于此表中的所有记录,我需要通过使用 jQuery 添加一些验证,这将检查用户是否首先决定将光标放在三个表行之一的 textarea 字段中,而无需先进行选择从选择列表中(即选项值不能为 0),然后显示警告,指示“需要选择原因”并将焦点放在此“原因”字段中。
<table summary="Contacts" class="uReport uReportStandard">
<thead>
<tr>
<th id="CONTCT_NM">Contact Name</th>
<th id="TEL_NO">Telephone
<br/>No.</th>
<th id="STATE">State</th>
<th id="REAS">Reason</th>
<th id="DATE_CALLED">Date
<br/>Contacted</th>
<th id="MPA_COMMENT">Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="CONTCT_NM">Contact A</td>
<td headers="TEL_NO">123456</td>
<td headers="STATE">VIC</td>
<td headers="REAS">
<input type="hidden" name="f01" value="16919" />
<input type="hidden" name="f02" value="100319" />
<select name="f10" id="selectLOV1" class="lov_select">
<option value="0">--- Please select a reason ---</option>
<option value="1" selected="selected">Contacted / Spoken</option>
<option value="2">Contacted / Unavailable</option>
<option value="3">Other</option>
</select>
</td>
<td headers="DATE_CALLED">
<input type="text" name="f20" size="14" maxlength="2000" value="30/08/2012 09:42"
class="date_val" readonly="readonly" style="background-color:#B0C4DE;border:1px solid #999999;"
/>
</td>
<td headers="COMMENT">
<textarea name="f30" rows="2" cols="30" wrap="VIRTUAL">Contact A</textarea>
</td>
</tr>
<tr>
<td headers="CONTCT_NM">Contact B</td>
<td headers="TEL_NO">123456</td>
<td headers="STATE">VIC</td>
<td headers="REAS">
<input type="hidden" name="f01" value="16919" />
<input type="hidden" name="f02" value="100314" />
<select name="f10" id="selectLOV2" class="lov_select">
<option value="0">--- Please select a reason ---</option>
<option value="1" selected="selected">Contacted / Spoken</option>
<option value="2">Contacted / Unavailable</option>
<option value="3">Other</option>
</select>
</td>
<td headers="DATE_CALLED">
<input type="text" name="f20" size="14" maxlength="2000" value="30/08/2012 09:42"
class="date_val" readonly="readonly" style="background-color:#B0C4DE;border:1px solid #999999;"
/>
</td>
<td headers="COMMENT">
<textarea name="f30" rows="2" cols="30" wrap="VIRTUAL">Contact B</textarea>
</td>
</tr>
<tr>
<td headers="CONTCT_NM">Contact C</td>
<td headers="TEL_NO">123456</td>
<td headers="STATE">VIC</td>
<td headers="REAS">
<input type="hidden" name="f01" value="16919" />
<input type="hidden" name="f02" value="100312" />
<select name="f10" id="selectLOV3" class="lov_select">
<option value="0">--- Please select a reason ---</option>
<option value="1" selected="selected">Contacted / Spoken</option>
<option value="2">Contacted / Unavailable</option>
<option value="3">Other</option>
</select>
</td>
<td headers="DATE_CALLED">
<input type="text" name="f20" size="14" maxlength="2000" value="30/08/2012 09:42"
class="date_val" readonly="readonly" style="background-color:#B0C4DE;border:1px solid #999999;"
/>
</td>
<td headers="COMMENT">
<textarea name="f30" rows="2" cols="30" wrap="VIRTUAL">Contact C</textarea>
</td>
</tr>
</tbody>
</table>