TD的背景图片答案

【问题标题】：background image for TDTD的背景图片
【发布时间】：2011-04-13 07:52:21
【问题描述】：

使用 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>

【问题讨论】：

标签： jquery jquery-ui jquery-selectors

【解决方案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();
      }

【讨论】：

@Nick 感谢您的帮助，但我收到 Microsoft JScript 运行时错误：对象预期错误。我在模糊和焦点周围加了双引号，但仍然没有运气。
@Nick 是的，我正在输入一个脚本块。
@Nick 我最终在第三个大括号上放了一个 right ) 。但是当页面第一次启动时，我现在得到一个绿色复选框。有没有办法让它隐藏起来，直到输入文字。
@MdeVera，我修复了上面的语法错误，如果您不想在页面加载后立即进行验证，那么在开始时取出 firstNameError(); 和 firstNameValid(); 函数调用。跨度>

【解决方案2】：

删除您拥有的两个 if 检查并添加

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

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

【讨论】：

大家好，我已经尝试了这两种解决方案，但在查看它们似乎是正确的语法时，我不断收到错误消息。错误是 Micorsoft jscript 运行时错误：预期对象。