Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Ошибка при подключении css к javascript.
zlojnaxa  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 9
Пользователь №: 42906
На форуме: 7 месяцев, 10 дней
Карма:




Добрый день уважаемые программисты. Снова уперся в стену :) Незнаю в какую тему писать, зараннее ссори.
Есть код 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");
}

}

}
); [spoiler][/spoiler]


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

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

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

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

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

Ну и много еще всяких мелочей пробовал. I NEED HELP!!! Подскажите пожалуйста как решить эту проблемку (желательно)? Ну или подтолкните куда идти (на крайняк) :)
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Kusss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1357
Пользователь №: 28976
На форуме: 5 лет, 4 месяца, 10 дней
Карма: 77




Сначала запомни 1 раз свой span.
    var $input = $("#username"), // input для ввода логина
$span = $input.next(),
$span.removeClass(), // удаляем все классы
username = $input.val(),
expusername = /^[a-z0-9]{4,30}$/g, //^[a-z]{1}[a-z1-9]{4,19}$
resusername = username.search(expusername);

....


$span.text("Логин занят").addClass('spann_red').css("color","yellow");


Add Кстати а почему span , Если ты ему задаешь ширину ?

Это сообщение отредактировал Kusss - 11.05.2016 - 14:48
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Kusss  
[x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1357
Пользователь №: 28976
На форуме: 5 лет, 4 месяца, 10 дней
Карма: 77




а лучше так
<input name="username" type="text" placeholder="Логин" size="50" id="username" required="required"> <div class="userInfo"></div>

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

.userInfo.red {
background-color: #FF7575;
}

    var $input = $("#username"), // input для ввода логина
$info = $input.next(),
$('.userInfo').removeClass(), // или $info.removeClass('green red');
username = $input.val(),
expusername = /^[a-z0-9]{4,30}$/g, //^[a-z]{1}[a-z1-9]{4,19}$
resusername = username.search(expusername);

....

$info.hide().text("Логин занят").addClass('red').css("color","yellow").fadeIn(400);


Это сообщение отредактировал Kusss - 11.05.2016 - 15:01
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
zlojnaxa  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 9
Пользователь №: 42906
На форуме: 7 месяцев, 10 дней
Карма:




Цитата (Kusss @ 11.05.2016 - 14:57)
а лучше так
<input name="username" type="text" placeholder="Логин" size="50" id="username" required="required"> <div class="userInfo"></div>

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

.userInfo.red {
background-color: #FF7575;
}

    var $input = $("#username"), // input для ввода логина
$info = $input.next(),
$('.userInfo').removeClass(), // или $info.removeClass('green red');
username = $input.val(),
expusername = /^[a-z0-9]{4,30}$/g, //^[a-z]{1}[a-z1-9]{4,19}$
resusername = username.search(expusername);

....

$info.hide().text("Логин занят").addClass('red').css("color","yellow").fadeIn(400);

Спасибо за отклик сейчас попробую!
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
zlojnaxa  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 9
Пользователь №: 42906
На форуме: 7 месяцев, 10 дней
Карма:




Цитата (Kusss @ 11.05.2016 - 14:57)


  var $input = $("#username"), // input для ввода логина
  $info = $input.next(),
  $('.userInfo').removeClass(), // или $info.removeClass('green red');
  username = $input.val(),
  expusername = /^[a-z0-9]{4,30}$/g,  //^[a-z]{1}[a-z1-9]{4,19}$
  resusername = username.search(expusername);

....

$info.hide().text("Логин занят").addClass('red').css("color","yellow").fadeIn(400);


Плохо знаю javascript, подскажите куда и вместо чего вставлять это
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Kusss  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Здесь живет
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1357
Пользователь №: 28976
На форуме: 5 лет, 4 месяца, 10 дней
Карма: 77




первая часть вместо
    username = $("#username").val();
var expusername = /^[a-z0-9]{4,30}$/g; //^[a-z]{1}[a-z1-9]{4,19}$
var resusername = username.search(expusername);
вторая вместо, ну и так же вторую часть
$("#username").next().hide().text("Логин занят").css("color","yellow").fadeIn(400);
$("#username").removeClass().addClass("inputRed");

"тут сложно ошибиться"

Ну и везде заменить $("#username").next() на $info

Это сообщение отредактировал Kusss - 11.05.2016 - 17:39
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса