views:

27

answers:

1

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>
A: 

I put your code up on: http://jsfiddle.net/BZRWF/1/ using jquery 1.2.6, and it seems to work (I added a button to click to instantiate the event). I tested using IE8 in compatibility mode with no issues.

I also tested in 1.3.2 and 1.4.2 and it works ok there also.

Mark Schultheiss