我正在使用 AJAX 调用来验证表单中的电子邮件字段。这是必要的,因为我需要验证电子邮件地址是否已被占用。 在我第一次尝试导致 ajax 请求无限循环后,我发现 this solution这似乎工作正常。
异常(exception):在表单实际提交之前,我需要单击“提交”两次。 有人知道这是为什么吗?
这是我的 js 代码的最小示例:
$('form').submit(function(event){
event.preventDefault();
$.post('/echo/json', {'mail': $('#test').val()}, function(data){
//decide if valid or not based on data
//we assume it's valid an want to submit the form now!
$('form').unbind().submit();
//we should only see this for a very short time
$('.info').text('should have already submitted');
}, 'json');
});
这是一个jsfiddle .
编辑: 抱歉,我想我不太清楚。我插入了一些评论来澄清: 我想使用 AJAX 请求的响应来决定是否提交表单,如果不提交则显示错误。不提交效果很好,但如果邮件地址有效,则需要单击两次提交才能实际提交。该示例模拟了这种情况。
unbind()
是必要的,因为否则我会创建一个无限循环($('form').submit(...)
将再次被调用)。
此外 jQuery.post() 是异步的,因此在成功处理程序中调用 event.preventDefault()
将不起作用,因为表单已经提交。
最佳答案
也许这就是您所需要的?
取消绑定(bind)submit
事件处理程序,然后触发$('#submit')
点击:
$('form').submit(function(event){
event.preventDefault();
$.post('/echo/json', {'mail': $('#test').val()}, function(data){
$('form').unbind('submit').find('#submit').trigger('click');
$('.info').text('should have already submitted');
}, 'json');
});
<小时/>
或者,使用 .one()
事件处理程序(以便该处理程序仅触发一次),然后触发 $('#submit')
点击,以便在 AJAX 响应后以正常方式提交表单。
$('form').one('submit',function(event){
event.preventDefault();
$.post('/echo/json/', {action : 'checkmail_action', mail : $('#test').val()}, function(data){
//if(data == 'e-mail is valid'){
$('#submit').trigger('click');
//}
$('.info').text('should have already submitted');
}, 'json');
});
或者,如果您需要再次提交事件,您可以将 .one()
事件处理程序包装到函数中:
function ajaxCheck(){
$('form').one('submit',function(event){
event.preventDefault();
$.post('/echo/json/', {action : 'checkmail_action', mail : $('#test').val()}, function(data){
if(data == 'e-mail is valid'){
// submit the form without AJAX:
$('#submit').trigger('click');
}else{
// rebind submit handler, so that e-mail can be validated with AJAX again:
ajaxCheck();
}
$('.info').text('should have already submitted');
}, 'json');
});
}
// bind single submit handler:
ajaxCheck();
PS。不要在 AJAX data
键上使用引号。
关于jquery - 使用 AJAX 进行表单验证需要单击两次提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28810874/