CODEWITHSUNDEEP
jqueryjquery-uijquery-selectors
MdeVera
MdeVera

Reputation: 647

background image and the toggleclass

I have a TD element that won't change its background to an image. I'm using ToggleClass from JQUERY.

Here is the two different CSS styles that I'm using :

.style22
  {
      height: 16px;
      width: 237px;
      background-image: url('../Images/Red-Error-Box.png');
      background-repeat: no-repeat;
  }
  .style23
  {
      height: 16px;
      width: 237px;
      background-image:none
  }

Here is the function I'm using to toggle the class but it won't toggLe.:

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

  var emailEXP = /^([A-Za-z0-9_\+\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

      if (!emailEXP.test(($("#tbEmail").val()))) {
          $('#EmailErrorMSG').toggleClass('style22');
          $('#EmailErrorMSG').show();
     }     

  }

  </script>

Here is the HTML markup:

 <tr>
    <td id="EmailErrorMSG" nowrap="nowrap" class="style23"></td>
 </tr>


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

Thanks for any help.

Upvotes: 0

Views: 966

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196276

You should toggle both classes so that only one applies at any time..

$('#EmailErrorMSG').toggleClass('style22 style23');

Upvotes: 2

Guy Schaller
Guy Schaller

Reputation: 4700

in style 23: just make it important... background-image:none!important

you dont need the height and the width.

when you toggle both classes are on that element.

but if you want to do it even better you can create the classes diffrent: create one class that has only the height and the width

and one class the has the image settings. then just toggle the second class.

.style22
  {
      height: 16px;
      width: 237px;

  }
  .style23
  {
      background-image: url('../Images/Red-Error-Box.png');
      background-repeat: no-repeat;
  }

Upvotes: 1

Related Questions