adding an image with JQUERY and after a text box is blank

Question

I'm trying to add an image after a button is clicked. However, I can't seem to get the attribute of an image to show a different .png file. Basically if the text is blank then show a green check else show a red icon. I want to validate text then validate the expression to be in an email format. But for now I can't seem to get the image to change when a text box is null.

Here is what I'm loading at the beginning of the page:

<script type="text/javascript">
  $(document).ready(function () {
      $('#imgEmail').hide();
  });
</script>

Here is my logic after the button is clicked:

<script type="text/javascript">
  function validateText() {

      if (!$("#tbEmail").val()) {
          $('#imgEmail').attr('src', '../Images/Red-Error-Icon.png');
      } else {              
          $('#imgEmail').attr('src', '../Images/Green-Check-Icon.png');        
      }
  }
</script>

Here is the HTML for the texbox, image and the button:

<asp:TextBox ID="tbEmail" runat="server"></asp:TextBox>

<img id="imgEmail" alt="">

<asp:Button ID="btnSignUp" runat="server" OnClientClick="validateText()"/>

Thanks for any help.

Answer 1

You have changed the attribute but the image is still hidden.

You need to add $('#imgEmail').show();

 <script type="text/javascript">
      function validateText() {

          if (!$("#tbEmail").val()) {
              $('#imgEmail').attr('src', '../Images/Red-Error-Icon.png');
          } else {              
              $('#imgEmail').attr('src', '../Images/Green-Check-Icon.png');        
          }
    $('#imgEmail').show();


      }
    </script>

Answer 2

您还不需要显示这张图片吗？

$('#imgEmail').show();