Question

使用jquery验证文本框中是否有文本。当我第一次启动我的页面并将文本框保留为null时，我的背景图像在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

在全局范围内有这两个验证器函数：

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

Answer 2

删除两个if if have have并添加

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

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

TD的背景图片

2 个答案: