background image for TD

Using jquery to validate that there is text in a text box. When I first start my page and leave the text box null then my background image in a TD element two cells from the text box shows a red box and after I click a button. If I enter text then click my button then a green che开发者_C百科ck icon is shown directly next to the text box. This is all good.

However, when I remove any text in the text box click my button I don't get a red box in my TD element anymore as I did the first time that I started my page.

Thanks for any assistance.

CSS:

.Error
  {
     background-image: url('../Images/Red-Error-Box.png');
     background-repeat: no-repeat;
     background-position: center;
  }
.Empty
  {
     background: white;
     height: 15px;
     width: 237px;
  }

JavaScript:

function firstNameError() {
    $('#FirstNameErrorMSG').addClass('Error');
    $('#FirstNameErrorMSG').text('Please enter a first name');
    $('#FirstNameErrorMSG').show();
    $('#imgFirstName').attr('src', '../Images/Red-Error-Icon.png');
    $('#imgFirstName').show();
}

function firstNameValid() {
    $('#FirstNameErrorMSG').addClass('Empty');
    $('#FirstNameErrorMSG').text('');
    $('#FirstNameErrorMSG').show();
    $('#imgFirstName').attr('src', '../Images/Green-Check-Icon.png');
    $('#imgFirstName').show();
}

//null first name.
if (!$("#tbFirstName").val()) {
     firstNameError();
}

//not null first name.
if ($("#tbFirstName").val()) {
    firstNameValid();
}

HTML:

<td class="style46">
    <img id="imgFirstName" alt="" class="None">
</td>
<td id="FirstNameErrorMSG" runat="server"></td>

You have these two validator functions in the global scope:

 //null first name.
if (!$("#tbFirstName").val()) {
       firstNameError();
}

//not null first name.
if ($("#tbFirstName").val()) {
          firstNameValid();
      }

Which means when you alter the textbox your not telling the jQuery to do anything. I suspect you want onBlur function:

$(function() {

     firstNameError(); //Check on dom ready
     firstNameValid(); //Check on dom ready

$("#tbFirstName").bind('blur','focus',function() {
    myValidator();
});

    function myValidator() {
          //null first name.
          if (!$("#tbFirstName").val()) {
               firstNameError();
          }
            else if ($("#tbFirstName").val()) {
              firstNameValid();
          }
     }
});

    function firstNameError() {
        $('#FirstNameErrorMSG').addClass('Error');
        $('#FirstNameErrorMSG').text('Please enter a first name');
        $('#FirstNameErrorMSG').show();
        $('#imgFirstName').attr('src', '../Images/Red-Error-Icon.png');
        $('#imgFirstName').show();
      }

    function firstNameValid() {
        $('#FirstNameErrorMSG').addClass('Empty');
        $('#FirstNameErrorMSG').text('');
        $('#FirstNameErrorMSG').show();
        $('#imgFirstName').attr('src', '../Images/Green-Check-Icon.png');
        $('#imgFirstName').show();
      }

Remove the two if checks that you have and add

$(function(){
    $("#tbFirstName").change() {
        $(this).val() ? firstNameValid() : firstNameError();
    }

    $(this).val() ? firstNameValid() : firstNameError();
})