Question

I have the following table structure:

            <tr>
                <th><label for="ctl00_bodyContent_username">username:</label></th>
                <td class="field"><input name="ctl00$bodyContent$username" type="text" id="ctl00_bodyContent_username" /></td>
                <td class="info">
                    <div class="message">what do you want to be known as?</div>
                    <div class="valid">username available</div>
                    <div class="invalid">this username is already taken</div>
                </td>
            </tr>

What I’m looking to achieve is when the textbox #ctl00_bodyContent_username has focus, te div .message is shown (default is display:none) in the adjacent table cell.

Answer 1

Assuming there are more than one of these (and not just one as the other are assuming):

$("td.field :input").focus(function() {
  var info = $(this).parent().next();
  if ($(".valid:visible, .invalid:visible", info).length == 0) {
    info.children("message").show();
  }
}).blur(function() {
  var info = $(this).parent().next();
  info.children("message").hide();
});

This also assumes you want to hide the message when the field loses focus.