Раскраска текста с помощью CSS с помощью jQuery

Question

У меня небольшая проблема с добавлением класса к элементу span и раскрашиванием его для простой проверки.

Вот мой 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;
        }
      }

И html:

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

И jsfiddle: пример

Есть идеи?

ОБНОВЛЕНИЕ: окраска appKeyInfo завершается неудачно, окраска appkey работает,Когда я удаляю color: red и набираю font-weight: bold, вместо текста полужирный при ошибке.когда я удаляю определение цвета appKeyInfo, текст может быть окрашен красным при ошибке, странная вещь, но мне нужен цвет шрифта для appKeyInfo

Answer 1

Объявление для span#appKeyInfo имеет приоритет, так как это идентификатор, который вы вводите. Попробуйте использовать color:red !important для принудительного переопределения

Редактировать

Просто заметка, вы можете использовать несколько селекторов в вашем jQuery. Как это:

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

Answer 2

Ваш оператор сравнения неверен, используйте меньше, чем оператор:

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