Coloring text with css using jQuery

Question

I have a little problem adding a class to a span element and so coloring it in order to perform simple validation.

Here is my js:

     function validateKey(){
        var length = $('#appkey').val().length; 
        if(length != 8){
            $('#appkey').addClass('error');
            $('#appKeyInfo').addClass('error');
            return false;
        }else{
            $('#appkey').removeClass('error');
            $('#appKeyInfo').removeClass('error');
            return true;
        }
      }

And html:

<label>KEY</label></br>
<input type="text" id="appkey" value=""/></br>
<span id="appKeyInfo">Dein App-Key aus 8 Ziffern</span>

And the jsfiddle: example

Any ideas?

UPDATE: coloring of appKeyInfo fails, coloring appkey works. When I remove color:red and type font-weight:bold instead the text is bold on error. when I remove color definition of appKeyInfo the text can be colored red on error, strange thing, but I need a font color for the appKeyInfo

Is your CSS class for .error targeting only #appKey, or perhaps only input boxes? — majelbstoat
– majelbstoat, Commented Jan 13, 2011 at 7:29
Well at least you've ruled out that it wasn't a jQuery error, so you should update the question :) Try adding span#appKeyInfo.error to be explicit and see if that works, then work backwards. — majelbstoat
– majelbstoat, Commented Jan 13, 2011 at 7:44

Stuart Burrows · Accepted Answer · 2011-01-13 07:46:25Z

2

The declaration for span#appKeyInfo takes precedence since it is an id you are styling. Try using color:red !important to force the override

Edit

Just a note, you can use multiple selectors in your jQuery. Like this:

$('#appkey', '#appKeyInfo').removeClass('error');

answered Jan 13, 2011 at 7:46

Stuart Burrows

10.8k2 gold badges36 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joko Wandiro · Accepted Answer · 2011-01-13 07:49:05Z

0

your comparison operator is wrong, use less than operator :

  function validateKey(){
    var length = $('#appkey').val().length;    
    if(length < 8){
        $('#appkey').addClass('error');
        $('#appKeyInfo').addClass('error');
        return false;
    }else{
        $('#appkey').removeClass('error');
        $('#appKeyInfo').removeClass('error');
        return true;
    }
  }

answered Jan 13, 2011 at 7:49

Joko Wandiro

1,9972 gold badges18 silver badges29 bronze badges

1 Comment

DarkLeafyGreen Over a year ago

sorry but I exactly 8 chars are required. this question is about the coloring!

Collectives™ on Stack Overflow

Coloring text with css using jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related