我有一个用于更新用户信息的网络表单,当他更新电子邮件时,会通过ajax()
执行验证,以便在新电子邮件地址已被其他用户使用时向他发出警告。
我正在尝试在电子邮件正在使用时取消表单提交,但return false;
不起作用。
if语句中的任何其他return false;
工作正常,问题仅出在jQuery.ajax()
调用中。
这是实际的代码:
var email = jQuery('#email').val();
jQuery.ajax({
type : 'GET',
url : '/ajax/verify-email.php?email=' + email,
success : function( d ) {
if( d == '1' ) {
alert('Another user is using this email');
jQuery('input[name="email"]').focus();
return false; // this guy over here is not working!!!!
}
}
});
有没有人有解决方案?
答案 0 :(得分:22)
AJAX中的A实际上非常重要。它代表异步。这意味着您触发了对服务器的请求,这可能需要一些时间来处理,之后您会收到响应。此响应发生在成功回调中。但由于这种情况比实际表单提交要晚得多,因此在回复之前,您的表单实际上已经提交。因此,从AJAX成功回调中返回false是没有任何意义的。你想要做的是从表单的提交处理程序返回false。让我们看看我们如何实现这一点。
您可以订阅表单的.submit
处理程序并发送AJAX请求以验证电子邮件是否已被采用,如果未采用手动触发在成功AJAX中提交表单回调:
$('form').submit(function() {
// we send an AJAX request to validate the unicity of the email
$.ajax({
url: '/ajax/verify-email.php',
type: 'POST',
data: { email: $('#email').val() },
// we set the context to the form so that inside
// the success callback 'this' points to the form
context: this,
success: function(result) {
if (result != '1') {
// If the server send something different than 1
// we know that the email is unique and trigger
// the submission of the form using the underlying
// DOM element to avoid calling the .submit handler
// recusrively
this.submit();
} else {
// The email is not unique => we are informing
// the user that the email is already in use
alert('Another user is using this email');
$('#email').focus();
}
}
});
// we cancel the normal submission of the form
return false;
});
也绝不依赖客户端验证。表单成功提交到服务器后,请确保您正在执行email is unique
检查。如果您使用的是通过电子邮件字段中的唯一约束轻松实现的SQL数据库。
答案 1 :(得分:0)
您在此处运行异步代码。在你试图返回虚假的那一刻,它已经很晚了。您的函数已返回undefined
。如果要处理成功的结果,则需要提供回调。
答案 2 :(得分:0)
你应该使用event.preventDefault(),如下所示。
$('#form').submit(function(event) {
$.get('/ajax/verify-email.php?email=' + $('#email').val(), function(d) {
if (d == '1') {
alert('Another user is using this email');
$('#email').focus();
event.preventDefault();
}
});
});
答案 3 :(得分:0)
在这种情况下你不应该使用.submit()
,而是使用标记系统,.submit()
只应用于<form>
元素。
var email = jQuery('#email').val();
var flag = 0;
jQuery.ajax({
type : 'GET',
url : '/ajax/verify-email.php?email=' + email,
async: false,
success : function( d ) {
if( d == '1' ) {
alert('Another user is using this email');
jQuery('input[name="email"]').focus();
flag = 1;
}
}
});
if(flag == 1) return false;
答案 4 :(得分:0)
<form action="yourpage" method="post" onsubmit="return matchpass();">
<div>
<label> Name</label>
<input type="text" name="name" id="name">
</div>
<div>
<label> Email ID</label>
<input type="email" name="email" id="email">
</div>
<div>
<label> Mobile No</label>
<input type="text" name="mob" maxlength="10" onkeyup="check_if_exists();" autocomplete="off" id="mob">
</div>
<div>
<button type="button" >Send</button>
</div>
<span id="err"></span>
<div>
<label> OTP</label>
<input type="password" name="otp" id="otp" maxlength="6" placeholder="****">
<span id="err2"></span>
</div>
<div>
<input type="reset" value="Reset" class="reset-btn">
<input type="submit" name="submit" id="submit" value="Submit" >
</div>
</form>
<input type="hidden" id="otpcheck"/>
<script>
function matchpass()
{
$.ajax({
type:"post",
url: "yourpage",
data:{ mobile:mob,otp:otp},
success:function(data)
{
if(data==1)
{
document.getElementById("otpcheck").value=1; //important
}else{
document.getElementById("err2").style.color = "red";
document.getElementById("err2").innerHTML = "invalid OTP Number ";
document.getElementById("otpcheck").value=0; //important
}
}
});
if(document.getElementById("otpcheck").value==0){
return false;
}
}
答案 5 :(得分:0)
$('form').submit(function() {
// we send an AJAX request to validate the unicity of the email
$.ajax({
url: '/ajax/verify-email.php',
type: 'POST',
data: { email: $('#email').val() },
// we set the context to the form so that inside
// the success callback 'this' points to the form
context: this,
success: function(result) {
if (result != '1') {
// If the server send something different than 1
// we know that the email is unique and trigger
// the submission of the form using the underlying
// DOM element to avoid calling the .submit handler
// recusrively
this.submit();
} else {
// The email is not unique => we are informing
// the user that the email is already in use
alert('Another user is using this email');
$('#email').focus();
}
}
});
// we cancel the normal submission of the form
return false;
});
答案 6 :(得分:-1)
好像你没有真正理解jQuery的想法。你不需要使用return false,而不是那里。您可以致电event.preventDefault();
:
$('#form').submit(function(event) {
$.get('/ajax/verify-email.php?email=' + $('#email').val(), function(d) {
if (d == '1') {
alert('Another user is using this email');
$('#email').focus();
}
});
event.preventDefault();
});
请参阅this example。