Jquery Ajaxフォームが必要です2投稿するには

Question

jquery/ajax検証を行うhtmlフォームがあります。次

は

$(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; 
     } 
    }); 
}); 

エラーがない場合は、フォームがしかし場合は、ワンクリックで提出を次のように検証のための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> 

ですエラーがあり、これらのエラーは（妥当性検査規則に従って）整流され、送信ボタンは2回クリックして送信する必要があります。真と

$("#login").click();真のリターンの前に戻った後 - - 復帰後に真と

<input type="button" name="login" id="login" value="Submit">真のリターンの前に -

てきたが$("#login").on("click", function()

$("#login").trigger("click");に$("#login").click(function()の名前を変更し、以下の事柄

をしようとした変更しますボタンに送信

私は、このソリューションを試してみました（それが...結果は同じ2回のクリックが必要とした、動作しませんでした）

$(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変数を有効な応答を示す文字列と同じに設定し、フォームは2つを必要としません提出する。

これは、コードに近い視点を与えることと相まって、問題はajax呼び出しによる競合状態の一種だと推測します。

あなたのクリックハンドラは、このように設定されています。コードは結果が有効であるかどうかを確認するために、文字列をチェックところその最後のハンドラの内部

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

です。しかし、そこに到達するまでに、以前のAjaxリクエストはロードが完了せず、おそらくそれらの文字列はまだリセットされていない可能性があります。その関数にいくつかのconsole.logを追加して、それらの値が何であるかを確認して確認することができます。

これらのajax呼び出しは非同期であるため、フォームが有効であることを確認する前にそれらの呼び出しが完了するまで待つ必要があります。あなたが探しているものはPromisesとDeferredsです。

私はこのような何かにそれをリファクタリングを示唆している：

1. あなたの検証メソッドの両方に繰延設定します。
2. #loginクリックハンドラを削除し、すべてをフォームの送信ハンドラに移動します。
3. フォームのサブミットハンドラで、$.whenを使用する検証メソッドを呼び出します。

クイックコード例：http://jqfundamentals.com/chapter/ajax-deferreds：jQueryのドキュメントに加えて

// 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; 
    }); 
}); 

は、一目で、これは例のための別の優れたリソース、すべての説明のように見えます。私はあなたが持っているものに最も似ているものは、底に向かっていると思う。

検証方法の一つは、（未テスト）のように見えるかもしれないものの迅速なセットアップ：

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(); 
}