jquery Ajax表單需要2次點擊才能提交​​

Question

我有一個html表單，它可以實現jQuery/ajax驗證。

以下是HTML表單...

<div class="box3"> 
    <form method="post" name="loginform" action="models/login.php"> 
    <h2>LOGIN<br /><br /> (Post/Manage Property)</h2> 
     <input type="email" class="homepage" name="user_email2" id="user_email2" placeholder="Email" maxlength="50" required /> 
     <div class ="errormsg" id ="errormsg6"></div> 
     <input type="password" class="homepage" name="user_password2" id="user_password2" placeholder="Password" maxlength="20" required /> 
     <div class ="errormsg" id ="errormsg7"></div> 
     <input type="submit" name="login" id="login" value="Submit"> 
     <div class ="errormsglast" id ="errormsg8"></div> 
     <div class="homeforgotpassword"><a href="forgot-password" class="forgotpasswordlink">Forgot Password</a></div> 
    </form> 
</div> 

審定的jQuery/Ajax是如下

$(document).ready(function() 
{ 
    /* ----------------- Login Validations Global Variables ----------------- */ 
    var user_email2 = ""; 
    var user_password2 = ""; 
    var user_emailajax2 = ""; 
    var user_mobileajax2 = ""; 

    var emailformat = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i); 

    /* ----------------- Define Validate Email */ 
    var validate_email_login = function() 
     { 
      var item5 = $("#user_email2").val(); 
      var item5 = item5.toLowerCase(); 

      if (item5.length < 6 || item5.length > 50) 
      { 
       $("#errormsg6").html("Email : 6 - 50 Characters"); 
       user_email2 = ""; 
      } 
      else 
      { 
       $("#errormsg6").html("") 
       user_email2 = item5; 
       if (!emailformat.test(item5)) 
       { 
        $("#errormsg6").html("Wrong Email Format") 
        user_email2 = ""; 
       } 
       else 
       { 
        $("#errormsg6").html("") 
        user_email2 = item5; 
        $.ajax(
        { 
         type: 'POST', 
         url: 'classes/validatelogin.php?f=1', 
         data: "user_email2=" + item5, 
         success: function(msg) 
         { 
          if (msg == "exists") 
          { 
           $("#errormsg6").html(""); 
           user_emailajax2 = item5; 
          } 
          else if (msg == "ok") 
          { 
           $("#errormsg6").html("Email Does Not Exist"); 
           user_emailajax2 = ""; 
          } 
         } 
        }); 
       } 
      } 
     } 

    /* ----------------- Define Validate Password */ 
    var validate_password_login = function() 
     { 
      var item5 = $("#user_email2").val(); 
      var item5 = item5.toLowerCase(); 

      var item6 = $("#user_password2").val(); 
      if (item6.length < 8 || item6.length > 20) 
      { 
       $("#errormsg7").html("Password : 8-20 Characters") 
       user_password2 = ""; 
      } 
      else 
      { 
       $("#errormsg7").html("") 
       user_password2 = item6; 
       $.ajax(
       { 
        method: "POST", 
        url: "classes/validatelogin.php?f=2", 
        data: "user_email2=" + item5 + "&user_password2=" + item6, 
        success: function(msg) 
        { 
         if (msg == "WrongPw") 
         { 
          $("#errormsg7").html("Wrong Password"); 
          user_mobileajax2 = ""; 
         } 
         else if (msg == "CorrectPw") 
         { 
          $("#errormsg7").html(""); 
          user_mobileajax2 = "item6"; 
         } 
        } 
       }); 
      } 
     } 

    /* ----------------- Run Functions */ 
    $("#user_email2").on('focusout', validate_email_login); 
    $("#user_password2").on('focusout', validate_password_login); 
    $("#login").on('click', validate_email_login); 
    $("#login").on('click', validate_password_login); 

    /* ----------------- Stop on Submit */ 
    $("#login").click(function() 
    { 
     if (user_email2 == "" || user_password2 == "" || user_emailajax2 == "" || user_mobileajax2 == "") 
     { 
      $("#errormsg8").html("Please Fill All Fields (Correctly)") 
      return false; 
     } 
     else 
     { 
      return true; 
     } 
    }); 
}); 

如果沒有錯誤，那麼形式，點擊提交，但是如果有錯誤，然後糾正這些錯誤（按照驗證規則），然後提交按鈕需要兩次點擊才能提交​​。

曾嘗試以下的事情

重命名$("#login").click(function()到$("#login").on("click", function()

$("#login").trigger("click"); - 迴歸後真正的並返回true

$("#login").click();前 - 後回真，迴歸真正的

<input type="button" name="login" id="login" value="Submit">前 - 改變提交到按鈕

我想這個解決方案（它沒有工作，結果需要相同的兩個音...）

$(document).ready(function() 
{ 
    /* ----------------- Login Validations Global Variables ----------------- */ 
    var user_email2 = ""; 
    var user_password2 = ""; 
    var user_mobileajax2 = ""; 
    var emailformat = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i); 
    /* ----------------- Define Validate Password */ 
    var validate_password_login = function() 
    { 
     // Set up the deferred object 
     var def = $.Deferred(); 
     var item5 = $("#user_email2").val(); 
     var item5 = item5.toLowerCase(); 
     var item6 = $("#user_password2").val(); 
     if (item6.length < 8 || item6.length > 20) 
     { 
      $("#errormsg7").html("Password : 8-20 Characters"); 
      user_password2 = ""; 
      // Not a valid password so reject the deferred 
      def.reject(); 
     } 
     else 
     { 
      $("#errormsg7").html(""); 
      user_password2 = item6; 
      $.ajax(
       { 
        method: "POST", 
        url: "classes/validatelogin.php?f=2", 
        data: "user_email2=" + item5 + "&user_password2=" + item6 
       }) 
       .done(function(msg) 
       { 
        if (msg == "WrongPw") 
        { 
         $("#errormsg7").html("Wrong Password"); 
         user_mobileajax2 = ""; 
         // The server said the PW was wrong, so reject this 
         def.reject(); 
        } 
        else if (msg == "CorrectPw") 
        { 
         $("#errormsg7").html(""); 
         user_mobileajax2 = "item6"; 
         // Looks like we are valid so we can resolve this 
         def.resolve(); 
        } 
       }) 
       .fail(function() 
       { 
        // Something went wrong on the server side, so have to reject 
        def.reject(); 
       }); 
     } 
     // We return the promise 
     return def.promise(); 
    } 
    /* ----------------- Run Functions */ 
    $("#user_password2").on('focusout', validate_password_login); 
    // Move to submit handler 
    $('form[name="loginform"]').on('submit', function() 
    { 
     // Set up the validation methods inside $.when 
     $.when(validate_password_login()) 
      .done(function() 
      { 
       // Done means success! 
       return true; 
      }) 
      .fail(function() 
      { 
       // And fail is obviously a fail. 
       return false; 
      }); 
    }); 
}); 

Answer 1

我沒有完全建立的整個登錄複製這一點，但我沒有做一個快速假通過更改ajax.success到ajax.error並使用錯誤的url來觸發錯誤進行測試，然後在錯誤內部，我將msg變量設置爲等於發出有效響應的字符串，並且表單不需要兩個提交。

這樣，再加上仔細看看代碼，我會猜測這個問題是由於ajax調用導致的一種競爭條件。

你的點擊處理程序設置是這樣的：

$("#login").on('click', validate_email_login); 
$("#login").on('click', validate_password_login); 
$("#login").click(function() { ... }); 

內部的最後一個處理的是其中的代碼檢查字符串，看看結果是有效的。但是，到達那裏時，那些先前的ajax請求可能尚未完成加載，並且這些字符串可能尚未重置。您可以在該函數中添加一些console.logs以查看這些值的含義並進行確認。

因爲這些ajax調用是異步的，所以你必須等待它們完成，然後才能檢查表單是否有效。你在找什麼是Promises和Deferreds。

我會建議它重構弄成這個樣子：

1. 設立在您的兩個驗證方法遞延。
2. 刪除#login點擊處理程序並將所有內容移動到表單的提交處理程序中。
3. 在表單的提交處理程序中使用$.when調用驗證方法。

快速的代碼示例：

// Move to submit handler 
$('form[name="loginform"]').on('submit', function() { 
    // Set up the validation methods inside $.when 
    $.when(validate_email_login(), validate_password_login()) 
    .done(function() { 
     // Done means success! 
     return true; 
    }) 
    .fail(function() { 
     // And fail is obviously a fail. 
     return false; 
    }); 
}); 

除了jQuery的文檔，一目瞭然，這看起來像另一個很好的資源爲實例，一切的解釋：http://jqfundamentals.com/chapter/ajax-deferreds。我認爲，你所擁有的東西最接近底部。

的驗證方法是什麼一個快速的設置可能看起來像（未經測試）：

var validate_password_login = function() { 
    // Set up the deferred object 
    var def = $.Deferred(); 
    var item5 = $("#user_email2").val(); 
    var item5 = item5.toLowerCase(); 
    var item6 = $("#user_password2").val(); 

    if (item6.length < 8 || item6.length > 20) { 
     $("#errormsg7").html("Password : 8-20 Characters"); 
     user_password2 = ""; 
     // Not a valid password so reject the deferred 
     def.reject(); 
    } else { 
     $("#errormsg7").html(""); 
     user_password2 = item6; 
     $.ajax({ 
     method: "POST", 
     url: "http://www.google.com", 
     data: "user_email2=" + item5 + "&user_password2=" + item6 
     }) 
     .done(function(msg) { 
      if (msg == "WrongPw") { 
      $("#errormsg7").html("Wrong Password"); 
      user_mobileajax2 = ""; 
      // The server said the PW was wrong, so reject this 
      def.reject(); 
      } else if (msg == "CorrectPw") { 
      $("#errormsg7").html(""); 
      user_mobileajax2 = "item6"; 
      // Looks like we are valid so we can resolve this 
      def.resolve(); 
      } 
     }) 
     .fail(function() { 
      // Something went wrong on the server side, so have to reject 
      def.reject(); 
     }); 
    } 

    // We return the promise 
    return def.promise(); 
}