За последние 24 часа нас посетил 17351 программист и 1297 роботов. Сейчас ищут 1718 программистов ...

Ошибка проверки логина на уникальность в Mysql через jquery-ajax

Тема в разделе "Вопросы от блондинок", создана пользователем zlojnaxa, 29 апр 2016.

  1. zlojnaxa

    zlojnaxa Активный пользователь

    С нами с:
    18 ноя 2015
    Сообщения:
    47
    Симпатии:
    4
    Здравсвуйте ув. программисты!
    Я начинающий не бейте больно :) Есть страница регистрации с полем логина " index.php ".


    Код (Text):
    1. <?php header('Content-Type: text/html; charset=utf-8');?>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    4. <head>
    5. <title>Проверка формы</title>
    6. <meta http-equiv="content-type" content="application/xhtml+xml; charset=windows-1251" />
    7. <script type="text/javascript" src="jquery-1.11.3.js"></script>
    8. <style>
    9. .inputRed{
    10. border:1px solid #ff4040;
    11. background: #ffcece;
    12. }
    13. .inputGreen{
    14. border:1px solid #83c954;
    15. background: #e8ffce;
    16. }
    17. </style>
    18.  
    19. <script type="text/javascript">
    20. var login;
    21. $(function() {
    22.     //Логин
    23.     $("#login").change(function(){
    24.         login = $("#login").val();
    25.         var expLogin = /^[a-zA-Z0-9_]+$/g;    //Еще вариант для поля логин: " var expLogin = /^([a-z0-9_-]+\.)*
    26.  
    27. [a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,4}$/g; "
    28.         var resLogin = login.search(expLogin);
    29.         if(resLogin == -1){
    30.             $("#login").next().hide().text("Неверный логин").css("color","red").fadeIn(400);
    31.             $("#login").removeClass().addClass("inputRed");
    32.             loginStat = 0;
    33.             buttonOnAndOff();
    34.         }else{
    35.             $.ajax({
    36.             url: "register.php",
    37.             type: "GET",
    38.             data: "login=" + login,
    39.             cache: false,
    40.             success: function(response){
    41.                 if(response == "no")
    42.                  { $("#login").next().hide().text("Логин занят").css("color","red").fadeIn(400);
    43.                     $("#login").removeClass().addClass("inputRed");                  
    44.                 }else{                  
    45.                     $("#login").removeClass().addClass("inputGreen");
    46.                     $("#login").next().text("Логин свободен").css("color","green").fadeIn(400);
    47.                 }          
    48.              
    49.             }
    50.         });
    51.             loginStat = 1;
    52.             buttonOnAndOff();
    53.         }
    54.      
    55.     });
    56.     $("#login").keyup(function(){
    57.         $("#login").removeClass();
    58.         $("#login").next().text("");
    59.     });
    60.  
    61.     function buttonOnAndOff(){
    62.         if(loginStat == 1){
    63.             $("#submit").removeAttr("disabled");
    64.         }else{
    65.             $("#submit").attr("disabled","disabled");
    66.         }
    67.  
    68.     }
    69.  
    70. });
    71. </script>
    72. </head>
    73. <body>
    74.  
    75. <form action="#" method="post">
    76.  
    77.     <label><font color='red'>*</font> Ваш Логин:<br></label>
    78.     <input name="login" type="text" size="50" id="login"> <span></span><br>  
    79.  
    80. </form>
    81.  
    82. </body>
    83. </html>

    Юзер вводит логин и как только он переключается на следующее поле для заполнения срабатывает функция keyup(function() и рядом появляется надпись: логин занят либо логин свободен. Проверка на уникальность логина происходит через " ajax => какой-то документ => MySql ". Но есть загвоздка, над которой уже 2 дня ломаю голову. Если в это поле ввести к примеру " ivan " который уже имеется в MySql, вылезит соответствующая надпись " логин занят ", но если не переключаясь на другие поля стереть и снова ввести " ivan " то уже надписи никакой не вылазит. Помогите пожалуйста кто нибудь. Подскажите в какую сторону копать. Как исправить, или что добавить в уже имеющийся код что бы все работало по логике? По этой ссылке можно посмотреть скрипты в действии: http://cu99877.tmweb.ru/ Для пробы попробуйте ввести логин " naum ". Скрипты на бесплатном хостинге поэтому скопируйте ссылку в адр. строку ))
     
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Если написали ivan потом стёрли и написали ivan, то не сработает событие on change, так как ничего не поменялось.
     
  3. zlojnaxa

    zlojnaxa Активный пользователь

    С нами с:
    18 ноя 2015
    Сообщения:
    47
    Симпатии:
    4
    Где подробнее можно прочитать о событии " on change ". Что это такое и как с ним работать. А лучше если подскажете какую то альтернативу или как заставить это событие сработать при том что ничего не меняется?
     
  4. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Просто поискать или посмотреть в книге по JavaScript.
    Можно повесить событие on blur это потеря фокуса, как то так ждать и обрабатывать два события

    Код (Javascript):
    1. $( ".test" ).on( "change blur", ... );
     
  5. mr.akv

    mr.akv Активный пользователь

    С нами с:
    31 мар 2015
    Сообщения:
    1.604
    Симпатии:
    206
    можно же повесить событие keyup с таймером
     
  6. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    http://htmlbook.ru/html/attr/onchange
    --- Добавлено ---
    http://www.w3schools.com/jsref/event_onchange.asp
    --- Добавлено ---
    http://www.w3schools.com/jsref/event_onchange.asp
    --- Добавлено ---
    https://learn.javascript.ru/events-change
    --- Добавлено ---
    возможно нужно смотреть в сторону события oninput
    --- Добавлено ---
    https://learn.javascript.ru/events-change#событие-input
     
  7. mr.akv

    mr.akv Активный пользователь

    С нами с:
    31 мар 2015
    Сообщения:
    1.604
    Симпатии:
    206
  8. zlojnaxa

    zlojnaxa Активный пользователь

    С нами с:
    18 ноя 2015
    Сообщения:
    47
    Симпатии:
    4
    Спасибо за ответы. Решил проблемку:

    Код (Text):
    1.  
    2. $("#username").onchange(function(){
    3. $("#username").removeClass();
    4. $("#username").next().text("");
    5.     });
    onchange ПОМОГ :)