фоновое изображение для TD

Question

Использование jquery для проверки наличия текста в текстовом поле. Когда я впервые запускаю свою страницу и оставляю текстовое поле пустым, мое фоновое изображение в элементе TD в двух ячейках из текстового поля показывает красное поле, а после нажатия кнопки. Если я ввожу текст, затем нажимаю на мою кнопку, рядом с текстовым полем отображается зеленый значок галочки. Это все хорошо.

Однако, когда я удаляю какой-либо текст в текстовом поле, нажмите мою кнопку, и я больше не получаю красное поле в своем элементе TD, как в первый раз, когда я начал свою страницу.

Спасибо за любую помощь.

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>

Answer 1

Удалите две проверки, если у вас есть, и добавьте

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

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

Answer 2

У вас есть две функции проверки в глобальной области видимости:

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

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

Что означает, что когда вы изменяете текстовое поле, вы не говорите jQuery ничего делать.Я подозреваю, что вы хотите функцию onBlur:

$(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();
      }