TD 的背景图片

发布于 2024-10-31 18:02:03 字数 1444 浏览 1 评论 0原文

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

原文

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 check 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绅刃 2024-11-07 18:02:03

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

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

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

回复收藏 0 原文

好久不见√ 2024-11-07 18:02:03

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

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

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

Remove the two if checks that you have and add

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

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

回复收藏 0 原文

~没有更多了~