jquery通过ajax验证电子邮件,然后再通过ajax提交表单
jquery validate email via ajax before submitting form also via ajax
我有一个配置文件创建表单,它有一个电子邮件地址字段。我需要确保用户输入的电子邮件地址是有效的格式,并且它还没有被使用。对于格式检查,我有一个由isValidEmailAddress函数执行的简单客户端验证,它运行良好。对于我需要检查电子邮件地址是否不存在的另一部分,我对一个控制器方法执行jquery post,如果电子邮件已被某人使用,该方法会返回一个字符串"电子邮件地址已在使用"。。但在下面的代码中,第一个"return false"并不能阻止表单提交。这是一个jquery异步的东西吗?
$(document).ready(function(){
$("#new_profile").submit(function(){
var email = $("#user_email").val();
if(isValidEmailAddress(email)){
jQuery.post('/profiles/validate_email', {email: email}, function(data){
if(data.match(/in use/)){
$(".email-check-message").html(data);
return false;
}
});
}
else{
$(".email-check-message").html('please enter a valid email address');
return false;
}
});
});
此外,上面函数中的jquery帖子似乎不起作用。。在中,我没有在服务器日志中看到服务器调用。有人知道发生了什么事吗?谢谢
可以提供不同的解决方案。
将邮件发送到php后,首先使用您的函数检查邮件,要控制的asp文件已在使用中。
$("#new_profile").submit(function(event){
var email = $("#user_email").val();
if(isValidEmailAddress(email)){
$.post(
'control.php?do=mail',
{mail:email},
function(answer){
//用答案做点什么
}
);
});
} else{
$(".email-check-message").html('please enter a valid email address');
return false;
}
只需使用以下内容:
$(document).ready(function(){
$("#new_profile").submit(function(event){
var email = $("#user_email").val();
if(isValidEmailAddress(email)){
jQuery.post('/profiles/validate_email', {email: email}, function(data){
if(data.match(/in use/)){
$(".email-check-message").html(data);
event.preventDefault();
}
});
}
else{
$(".email-check-message").html('please enter a valid email address');
}
});
});
您必须无条件取消提交,因为提交处理程序将在ajax请求返回之前完成执行(除非您将async设置为false),因此无法阻止已经发生的操作。您可以设置一个标志来指示电子邮件是否有效,然后提交表单
$(document).ready(function(){
$("#new_profile").submit(function(e){
if (!$('#new_profile').data('validemail')){
e.preventDefault();
var email = $("#user_email").val();
if(isValidEmailAddress(email)){
jQuery.post('/profiles/validate_email', {email: email}, function(data){
if(data.match(/in use/)){
$(".email-check-message").html(data);
}
else{
$('#new_profile').data('validemail', true).submit();
}
});
}
else{
$(".email-check-message").html('please enter a valid email address');
}
}
});
});
您可以使用
event.preventDefault()
以在检查有效电子邮件失败或电子邮件已在使用时停止提交表单。
下面是一个如何工作的例子。
尝试:
$(document).ready(function(){
$("#new_profile").submit(function(event){
var email = $("#user_email").val();
if(isValidEmailAddress(email)){
jQuery.post('/profiles/validate_email', {email: email}, function(data){
if(data.match(/in use/)){
$(".email-check-message").html(data);
event.preventDefault();
}
});
}
else{
$(".email-check-message").html('please enter a valid email address');
event.preventDefault();
}
});
});
相关文章:
- jQuery/Ajax-试图通过Ajax创建POST方法并获得对HTML的响应
- 使用ajax获取通过FTP上传的文件的文件大小——试图防止ajax中断自身
- jquery通过ajax验证电子邮件,然后再通过ajax提交表单
- 服务器端表单验证 AJAX,通过比较不同页面上的两个文本框
- Ajax,通过使用指向同一页面的链接提交表单
- 定位 AJAX 会通过使用“rel”属性生成正确的 DIV
- AJAX:无法通过上下文参数将对象传递到ajaxSuccess函数中
- AJAX没有通过javascript进行响应
- 通过Ajax将数据从Javascript发送到JSON,再发送到PHP
- Ajax——如何通过父JSP向子JSP提供数据并重新加载
- 更新数据库与javascript AJAX功能通过按钮
- 取消在ajax中通过post传递的变量的设置
- Ajax调用通过php检索所有客户的数据库数据
- 了解jQuery.在jquery上下文中延迟.AJAX(再一次)
- HTML, AJAX, PHP -通过AJAX向PHP页面发送HTML输入数组
- 使用 ajax 更新通过 php 表单发送的数据
- 是否有可能在ajax中通过模型传递其他参数
- JQuery ajax进度通过xhr
- Jquery, ajax,通过id获取元素
- AngularUI select2 AJAX设置通过模型