我有一个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后返回true
$( "#login" ).click(); - 返回true后返回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;
});
});
});
答案 0 :(得分：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.log来查看这些值是什么并确认。
因为那些ajax调用是异步的，所以你必须等待它们完成才能检查表单是否有效。您要找的是Promises和Deferreds。
我建议将其重构为以下内容：
$.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();
}