Ошибка при подключении css к javascript.

Добрый день уважаемые программисты. Незнаю в какую тему писать, зараннее ссори. Снова уперся в стену
Есть код Javascript:

Код (Javascript):

1. var username;
2. $(function() {
3.   $("#username").change(function(){
4.     username = $("#username").val();
5.     var expusername = /^[a-z0-9]{4,30}$/g;  //^[a-z]{1}[a-z1-9]{4,19}$
6.     var resusername = username.search(expusername);
7.     if(resusername == -1){
8.       $("#username").next().hide().text("Неверный формат! Логин может состоять только из латинских букв в нижнем регистре и/или цифр, может
9.  
10. начинаться с цифры. Не может содержать пробелов и спецсимволов. Длина от 4 до 30 символов.").css("color","yellow").fadeIn(400);
11.       $("#username").removeClass().addClass("inputRed");
12.       usernameStat = 0;
13.     }else{
14.       $.ajax({
15.       url: "verification_fields.php",
16.       type: "GET",
17.       data: "username=" + username,
18.       cache: false,
19.       success: function(response){
20.         if(response == "no")
21.           { $("#username").next().hide().text("Логин занят").css("color","yellow").fadeIn(400);
22.           $("#username").removeClass().addClass("inputRed");        
23.         }else{        
24.           $("#username").removeClass().addClass("inputGreen");
25.           $("#username").next().hide().text("Логин свободен").css("color","white").fadeIn(400);
26.         }    
27.        
28.       }
29.     });
30.       usernameStat = 1;
31.       buttonOnAndOff();
32.     }
33.    
34.   });
35.  
36. $("#username").onchange(function(){
37.     $("#username").removeClass();
38.     $("#username").next().text("");
39.     });
40.  
41.   function buttonOnAndOff(){
42.     if(usernameStat == 1){
43.       $("#submit").removeAttr("disabled");
44.     }else{
45.       $("#submit").attr("disabled","disabled");
46.     }
47.  
48.   }
49.  
50. });

Он проверяет в БД уникальность "username" через onchange. И по итогу в <span></span>:

HTML:

1.  
2. <input name="username" type="text" placeholder="Логин" size="50" id="username" required="required"> <span></span>
3.  

Выводит: либо "можно использовать этот логин" либо "нельзя", если можно то срабатывает встроенный css "inputGreen" (зеленый цвет) если нельзя то "inputRed" (красный цвет).
Есть два стиля css (местонахождение: css/style.css):

Код (CSS):

1. .spann_green
2. {
3. width: 665px;
4. height: auto;
5. background-color: #00B53B;
6. padding: 10px;
7. border-radius: 5px;
8. font-size: 15px;
9. line-height: 25px;
10. font-family: TitilliumText22LBold,ArtifikaMedium,Arial,Helvetica,sans-serif;
11. margin-left: 0px;
12. color: #FFFFFF;
13. }
14.  
15. .spann_red
16. {
17. width: 665px;
18. height: auto;
19. background-color: #FF7575;
20. padding: 10px;
21. border-radius: 5px;
22. font-size: 15px;
23. line-height: 25px;
24. font-family: TitilliumText22LBold,ArtifikaMedium,Arial,Helvetica,sans-serif;
25. margin-left: 0px;
26. color: #FFFFFF;
27. }

Разница у этих стилей только в цвете заливке под текстом. Загвоздка в том что никак не могу понять как правильно подключить эти два css к данному скрипту javascript что бы в зависимости от результата выводился либо "spann_red" либо "spann_green".

Пробовал: вместо "inputRed" поставить "spann_red" а вместо "inputGreen" поставить "spann_green". Выводит только какой-то один стиль независимо от результата. В браузере через "просмотреть код элемента" наблюдается что при вводе неверного логина присваивается класс "spann_red" а при вводе верного логина "spann_green", но по факту (визуально на самой форме) выводится только один класс "spann_green". НЕУДАЧНО.

Пробовал: 2 <div></div> и 2 <span></span> с разными css классами. Визуально выводит только один стиль а в коде элемента через браузер 2 стиля в зависимости от результата. НЕУДАЧНО.

Пробовал: подключить оба стиля в корень html. Визуально выводит только один стиль а в коде элемента через браузер 2 стиля в зависимости от результата. НЕУДАЧНО.

Пробовал: вcтроить в javascript, css написанный для javascript. Вообще ничего не работает. НЕУДАЧНО.

Пробовал: через переменные php выводить определенную переменную в зависимости от результата, визуально выводит только один стиль а в коде элемента через браузер 2 стиля в зависимости от результата.

Ну и много еще всяких мелочей пробовал. I NEED HELP!!! Подскажите пожалуйста как решить эту проблемку (желательно подробней)? Ну или подтолкните куда идти (на крайняк)

 

Вообщем сам файл где находится форма для регистрации скачал на каком то сайте. Покопался и переделал css (который к нему прилагался) под свои нужды, ну как переделал , выяснил что за что отвечает и вносил изменения. Сутки, примерно, просидел я над той проблемой о которой выше писал, но потом случайно заметил в инспекторе (просмотр кода элемента) что тот div который по идеи должен выводится на экран- лезит почему то в input. Все правильно, проблема была именно в стилях. Пока не переделал этот css полностью с нуля - не понял в чем дело. После этого в зависимости от результата стало работать более менее ну то есть: вместо того что бы выводился красный div (если что то заполненно не так) под полем заполнения, просто краснеет поле inputa . Проблема была банальна НЕХРЕН ПОДСТРАИВАТЬ ПОД СЕБЯ ЧУЖИЕ ФАЙЛЫ Я так понял что бы выводился div его как то надо подключать в javascript. Может подскажете как правильно это сделать?