I'm working on some basic form validation styles for an ASP.Net website. I need to select all span elements that are visible, and add a css style to another element. (Just to indicate which input fields are invalid.)
The below code works like a charm in FF and Safari, but fails in IE. I've narrowed the problem down to the :visible selector. Here's the jQuery code.
IMPORTANT NOTE: Production site is running jQuery 1.3.1 There were changes made to the :visible selector in 1.3.2 release notes
$('span.inputError:visible').each(function() {
$(this).parent().parent().prev('td').children('label').children('span').css('color','red');
});
Here's the rendered HTML it's intended for:
<table width="100%" cellspacing="0" cellpadding="3" border="0">
<tbody>
<tr>
<td valign="top" style="text-align: right;" class="address_labels">
<label><span>*</span> First Name: </label>
</td>
<td>
<span id="ctl00_CMain_txtFirstName_wrapper"><input type="text" style="width: 190px;" invalidstyle="inputError" class="radEnabledCss Input" name="ctl00_CMain_txtFirstName_text" id="ctl00_CMain_txtFirstName_text" size="20" value=" zdogg"><input type="text" value=" zdogg" style="border: 0pt none ; margin: -18px 0pt 0pt; padding: 0pt; overflow: hidden; visibility: hidden; width: 1px; height: 1px;" name="ctl00$CMain$txtFirstName" id="ctl00_CMain_txtFirstName"><input type="hidden" name="ctl00_CMain_txtFirstName_ClientState" id="ctl00_CMain_txtFirstName_ClientState" autocomplete="off"></span>
<div>
<span style="color: Red; display: none;" class="inputError" id="ctl00_CMain_valFirstName">First name is required</span>
</div>
</td>
</tr>
</tbody></table>