我有一个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”).单击(function()到$(“#login”).on(“click”,function()
$( “#登录”)触发( “点击”). – 返回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;
});
});
});
解决方法:
我没有用完整的登录设置完全复制这个,但是我确实通过将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.
我建议将其重构为以下内容：
>在两种验证方法中设置延迟.
>删除#login单击处理程序并将所有内容移动到表单的提交处理程序中.
>在表单的提交处理程序中,使用$.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();
}
