JQuery Form Validation & Button Ripple

Question

Я нашел эту форму для входа на http://codepen.io/suez/pen/dPqxoM. Поэтому в основном, когда вы нажимаете кнопку, это эффект пульсации, и я пытаюсь настроить код так, чтобы он делал эффект только после него подтвердил, что пользователь существует в базе данных.

Оригинальный код -

$(document).on("click", ".login_facebook", function(e) { 
if (animating) return; 
animating = true; 
var that = this; 
ripple($(that), e); 
$(that).addClass("processing"); 
setTimeout(function() { 
    $(that).addClass("success"); 
    setTimeout(function() { 
    window.location = 'home.html'; 
    }, submitPhase2 - 70); 
    setTimeout(function() { 
    $login.hide(); 
    $login.addClass("inactive"); 
    animating = false; 
    $(that).removeClass("success processing"); 
    }, submitPhase2); 
}, submitPhase1); 
}); 

Мой код Изменить.

$(document).on("click", ".login__submit", function(e) { 
var username = $("#username").val(); 
var password = $("#password").val(); 

if(username ==''){ 
    $('.login__row:eq(0)').css("border","2px solid red"); 
    $('.login__row:eq(0)').css("box-shadow","0 0 3px red"); 
    $('.message').show("fast"); 

} 
else 
    if(password == '') 
    { 
    $('.login__row:eq(1)').css("border","2px solid red"); 
    $('.login__row:eq(1)').css("box-shadow","0 0 3px red"); 
    $('.message').show("fast"); 
    } 

    if(username != "" && password != "") 
    { 
    var UrlToPass = 'action=login&username='+username+'&password='+password; 
    $.ajax({ // Send the credential values to another checker.php using Ajax in POST menthod 
    type : 'POST', 
    data : UrlToPass, 
    url : 'login.php', 
    success: function(responseText){ // Get the result and asign to each cases 
     if(responseText == 0){ 
     $('.login__row').css("border","2px solid yellow"); 
     $('.login__row').css("box-shadow","0 0 3px yellow"); 

     } 
     else if(responseText == 1) 
     { 
      if (animating) return; 
      animating = true; 
      var that = this; 
      ripple($(that), e); 
      $(that).addClass("processing"); 
      setTimeout(function() { 
       $(that).addClass("success"); 
       setTimeout(function() { 
       window.location = 'home.html'; 
       }, submitPhase2 - 70); 
       setTimeout(function() { 
       $login.hide(); 
       $login.addClass("inactive"); 
       animating = false; 
       $(that).removeClass("success processing"); 
       }, submitPhase2); 
      }, submitPhase1);    
     } 
     else{ 
     alert('Problem with sql query'); 
    } 
    } 
    }); 
    } 

    }); 

Заранее спасибо

Answer 1

Я бы сказал, что у вас есть несколько вопросов.

В принципе, responseText является Строка. Итак, когда вы проверите if (responseText == 0) и if (responseText == 1)это просто не соответствует.

В JavaScript переменные типы имеют значение. Строка не равна Int.

Попробуйте использовать responseText * 1, чтобы преобразовать вашу String в Int. Тогда вам не следует сравнивать их.

---

Другой вопрос, который я вижу, это сфера вопрос. var that = this; полностью зависит от того, когда он называется.

Вы должны называть его так же, как код, который вы при условии, сделал - т.е. в функции событий не в АЯКС функции успех обратного вызова

Более подробную информацию о Сфера: What is the scope of variables in JavaScript

---

$(document).on("click", ".login__submit", function(e) { 
    var that = this; // scope issue solved 

    var username = $("#username").val(); 
    var password = $("#password").val(); 

    if(username =='') { 
     $('.login__row:eq(0)').css("border","2px solid red"); 
     $('.login__row:eq(0)').css("box-shadow","0 0 3px red"); 
     $('.message').show("fast"); 
    } else if(password == '') { 
     $('.login__row:eq(1)').css("border","2px solid red"); 
     $('.login__row:eq(1)').css("box-shadow","0 0 3px red"); 
     $('.message').show("fast"); 
    } 

    if(username != "" && password != "") { 
     var UrlToPass = 'action=login&username='+username+'&password='+password; 
     $.ajax({ 
      type : 'POST', 
      data : UrlToPass, 
      url : 'login.php', 
      success: function(responseText) { 
       if(responseText * 1 === 0) { // comparison issue solved 
        $('.login__row').css("border","2px solid yellow"); 
        $('.login__row').css("box-shadow","0 0 3px yellow"); 
       } else if(responseText * 1 === 1) { // comparison issue solved 
        if (animating) return; 
        animating = true; 

        ripple($(that), e); 
        $(that).addClass("processing"); 
        setTimeout(function() { 
         $(that).addClass("success"); 
         setTimeout(function() { 
          window.location = 'home.html'; 
         }, submitPhase2 - 70); 
         setTimeout(function() { 
          $login.hide(); 
          $login.addClass("inactive"); 
          animating = false; 
          $(that).removeClass("success processing"); 
         }, submitPhase2); 
        }, submitPhase1);    
       } else { 
        alert('Problem with sql query'); 
       } 
      } 
     }); 
    } 
});