JQuery窗體驗證和按鈕紋波

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將字符串轉換爲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'); 
       } 
      } 
     }); 
    } 
});