由于某种原因这个ajax调用
$('#new_user').submit(function(e){
$.ajax({
type: 'post',
url: "/validate_paypal",
dataType: 'json',
async: false,
data: {email : $('#user_paypal_email').val()},
success: function( data ) {
if (data.response["valid"] == false){
$('#user_paypal_email').closest('.field').addClass('fieldWithErrors');
$('.error_messages').remove();
$('<span class="error_messages" style="color:#E77776;margin-left: 10px;">This is not a valid paypal email address</span>').insertAfter('#user_paypal_email');
return false;
}
}
});
});
即使在打印出我的错误并且我的返回错误之后仍在提交表单....为什么会这样
答案 0 :(得分:2)
$.ajax
是一个函数调用,它定义了一个AJAX回调,然后.submit
函数结束。单独(异步)进行AJAX调用,然后你的成功函数返回false,基本上没有任何事情,因为.submit
已经完成。
你真正想做的是暂停表单提交过程,等待AJAX调用完成,然后决定是否应该继续。这可以通过第一次完全停止表单提交,然后在获得AJAX回调后手动重新提交它来实现。当然诀窍是你怎么知道它是有效的?您可以在submit元素上抛出一个值。
示例:
$('#new_user').submit(function(e){
var submitElem = $(this);
// Check for previous success
if (submitElem.data('valid') !== true) {
$.ajax({
type: 'post',
url: "/validate_paypal",
dataType: 'json',
async: false,
data: {email : $('#user_paypal_email').val()},
success: function( data ) {
if (data.response["valid"] == false) {
$('#user_paypal_email').closest('.field').addClass('fieldWithErrors');
$('.error_messages').remove();
$('<span class="error_messages" style="color:#E77776;margin-left: 10px;">This is not a valid paypal email address</span>').insertAfter('#user_paypal_email');
return false;
} else {
// If successful, record validity and submit (allowing to continue)
submitElem
.data('valid', true)
.submit();
}
}
});
return false;
} else {
// Fall through
return true;
}
});