Mr_Sergo
@Mr_Sergo

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

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

var username;
$(function() {
  $("#username").change(function(){
    username = $("#username").val();
    var expusername = /^[a-z0-9]{4,30}$/g;  //^[a-z]{1}[a-z1-9]{4,19}$
    var resusername = username.search(expusername);
    if(resusername == -1){
      $("#username").next().hide().text("Неверный формат! Логин может состоять только из латинских букв в нижнем регистре и/или цифр, может начинаться с цифры. Не может содержать пробелов и спецсимволов. Длина от 4 до 30 символов.").css("color","yellow").fadeIn(400);
      $("#username").removeClass().addClass("inputRed");
      usernameStat = 0;
    }else{
      $.ajax({
      url: "verification_fields.php",
      type: "GET",
      data: "username=" + username,
      cache: false,
      success: function(response){
        if(response == "no")
          { $("#username").next().hide().text("Логин занят").css("color","yellow").fadeIn(400);
          $("#username").removeClass().addClass("inputRed");         
        }else{          
          $("#username").removeClass().addClass("inputGreen");
          $("#username").next().hide().text("Логин свободен").css("color","white").fadeIn(400);
        }     
        
      }
    });
      usernameStat = 1;
      buttonOnAndOff();
    }
    
  });

$("#username").onchange(function(){
    $("#username").removeClass();
    $("#username").next().text("");
    });

  function buttonOnAndOff(){
    if(usernameStat == 1){
      $("#submit").removeAttr("disabled");
    }else{
      $("#submit").attr("disabled","disabled");
    }
  
  }
  
});

Он проверяет в БД уникальность "username" через onchange. И по итогу в :
<input name="username" type="text" placeholder="Логин" size="50" id="username" required="required"> <span></span>

выводит: либо "можно использовать этот логин" либо "нельзя", если можно то срабатывает встроенный css "inputGreen" (зеленый цвет) если нельзя то "inputRed" (красный цвет).
Есть два стиля css (местонахождение: css/style.css):
.spann_green
{
width: 665px;
height: auto;
background-color: #00B53B;
padding: 10px;
border-radius: 5px;
font-size: 15px;
line-height: 25px;
font-family: TitilliumText22LBold,ArtifikaMedium,Arial,Helvetica,sans-serif;
margin-left: 0px;
color: #FFFFFF;
}

.spann_red
{
width: 665px;
height: auto;
background-color: #FF7575;
padding: 10px;
border-radius: 5px;
font-size: 15px;
line-height: 25px;
font-family: TitilliumText22LBold,ArtifikaMedium,Arial,Helvetica,sans-serif;
margin-left: 0px;
color: #FFFFFF;
}

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

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

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

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

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

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

Ну и много еще всяких мелочей пробовал. I NEED HELP!!! Подскажите пожалуйста как решить эту проблемку (желательно подробнее)? Ну или подтолкните куда идти (на крайняк) :) Я начинающий пыхер, строго не судите.
  • Вопрос задан
  • 150 просмотров
Пригласить эксперта
Ответы на вопрос 2
streetflush
@streetflush
Пробовал: вместо "inputRed" поставить "spann_red" а вместо "inputGreen" поставить "spann_green". Выводит только какой-то один стиль независимо от результата. В браузере через "просмотреть код элемента" наблюдается что при вводе неверного логина присваивается класс "spann_red" а при вводе верного логина "spann_green", но по факту (визуально на самой форме) выводится только один класс "spann_green". НЕУДАЧНО.

Что значит "но по факту (визуально на самой форме) выводится только один класс"?
Текст разный в инпуте, а цвет фона один и тот же?
Ответ написан
Mr_Sergo
@Mr_Sergo Автор вопроса
21f0231b2a28414099d7740d2dc675ca.jpg
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы