javascript - 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"); - return true 之后和 return true 之前

$( "#login" ).click(); - return true 之后和 return true 之前

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