Добрый день уважаемые программисты. Снова уперся в стену :) Незнаю в какую тему писать, зараннее ссори.
Есть код 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!!! Подскажите пожалуйста как решить эту проблемку (желательно подробнее)? Ну или подтолкните куда идти (на крайняк) :) Я начинающий пыхер, строго не судите.
Простой
Средний
