嗨，大家好，请帮我解决我的问题。实际上我正在尝试使用javascript在表单上验证我的电子邮件字段并发布ajax请求以检查该电子邮件是否存在，但我的javascript函数不会等到ajax响应并且每次返回false。我希望在电子邮件不存在时返回true ...
$(document).ready(function(){
//global vars
var form = $("#signupForm");
var email = $("#email");
var email_error = $("#invalid");
//On blur
// userEmail.blur(validateEmail);
//On Submitting
form.submit(function(){
if(validateEmail()){
alert("submit true");
return true;
}else{
alert("submit false");
return false;
}
});
function validateEmail(){
//if it's NOT valid
alert("In email");
var a = $("#email").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
if(email.val() == ""){
email_error.html("Please enter your email ");
return false;
}
//if it's valid email
else if(filter.test(a)==false){
email_error.html("Please enter Valid email address");
return false;
}
else if(filter.test(a)==true){alert("elseif");
var baseUrl = '<?= base_url() ?>';
$.ajax({
type: "POST",
url: baseUrl+"index.php/index/validateUserEmail",
data: "useremail="+$("#email").val(),
success: function(msg){
alert(msg);
if(msg == "1")
{
$("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/cross.png" />');
$("#emailValidate").val("1");
email_error.html("This email-Id already exists!");
return false;
}
else
{
$("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/tick.png" />');
$("#emailValidate").val("0");
email_error.html(" ");
alert("alok");
return true;
}
}
});
}
else{
email_error.html(" ");
return true;
}
}
});
答案 0 :(得分：1)
尝试类似
的内容$(document).ready(function() {
// global vars
var form = $("#signupForm");
var email = $("#email");
var email_error = $("#invalid");
// On blur
// userEmail.blur(validateEmail);
// On Submitting
form.submit(function() {
validateEmail(function(flag) {
if (flag) {
alert("submit true");
form[0].submit();
} else {
alert("submit false");
}
});
return false;
});
function validateEmail(callback) {
// if it's NOT valid
alert("In email");
var a = $("#email").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
if (email.val() == "") {
email_error.html("Please enter your email ");
callback(false);
}
// if it's valid email
else if (filter.test(a) == false) {
email_error.html("Please enter Valid email address");
callback(false);
} else if (filter.test(a) == true) {
alert("elseif");
var baseUrl = '<?= base_url() ?>';
$.ajax({
type : "POST",
url : baseUrl + "index.php/index/validateUserEmail",
data : "useremail=" + $("#email").val(),
success : function(msg) {
alert(msg);
if (msg == "1") {
$("#tick_cross").fadeIn("slow")
.html('<img src="' + baseUrl
+ 'images/cross.png" />');
$("#emailValidate").val("1");
email_error
.html("This email-Id already exists!");
callback(false);
} else {
$("#tick_cross").fadeIn("slow")
.html('<img src="' + baseUrl
+ 'images/tick.png" />');
$("#emailValidate").val("0");
email_error.html(" ");
alert("alok");
callback(true);
}
}
});
}
else {
email_error.html(" ");
callback(true);
}
}
});
演示：Fiddle
的更好解决方案$(document).ready(function() {
// global vars
var form = $("#signupForm");
var email = $("#email");
var email_error = $("#invalid");
// On blur
// userEmail.blur(validateEmail);
// On Submitting
form.submit(function() {
validateEmail().done(function() {
console.log("submit true");
form[0].submit();
}).fail(function() {
console.log("submit false");
});
return false;
});
function validateEmail() {
var deferred = jQuery.Deferred()
// if it's NOT valid
console.log("In email");
var a = $("#email").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
if (email.val() == "") {
email_error.html("Please enter your email ");
deferred.reject();
}
// if it's valid email
else if (filter.test(a) == false) {
email_error.html("Please enter Valid email address");
deferred.reject();
} else if (filter.test(a) == true) {
console.log("elseif");
var baseUrl = '<?= base_url() ?>';
$.ajax({
type : "POST",
url : baseUrl + "index.php/index/validateUserEmail",
data : "useremail=" + $("#email").val(),
success : function(msg) {
alert(msg);
if (msg == "1") {
$("#tick_cross").fadeIn("slow")
.html('<img src="' + baseUrl
+ 'images/cross.png" />');
$("#emailValidate").val("1");
email_error
.html("This email-Id already exists!");
deferred.reject();
} else {
$("#tick_cross").fadeIn("slow")
.html('<img src="' + baseUrl
+ 'images/tick.png" />');
$("#emailValidate").val("0");
email_error.html(" ");
console.log("alok");
deferred.resolve();
}
}
});
}
else {
email_error.html(" ");
deferred.resolve();
}
return deferred.promise();
}
});
演示：Fiddle
答案 1 :(得分：0)
问题是AJAX调用需要时间，但是if if语句需要立即返回。我也不确定返回false是否足够，我相信你需要捕获事件并在其上调用preventDefault（）方法......
最好的办法是更改你的＆lt; input type =“submit”/＆gt;按钮到＆lt; input type =“button”id =“submitButton”/＆gt;然后完全删除您现在拥有的form.submit()处理程序。加上这个：
$(function(){
$('#submitButton').click(validateEmail)
})
然后将$("#signupForm").submit()添加到您的validateEmail()功能：
function validateEmail(){
//if it's NOT valid
alert("In email");
var a = $("#email").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
if(email.val() == ""){
email_error.html("Please enter your email ");
return false;
}
//if it's valid email
else if(filter.test(a)==false){
email_error.html("Please enter Valid email address");
return false;
}
else if(filter.test(a)==true){alert("elseif");
var baseUrl = '<?= base_url() ?>';
$.ajax({
type: "POST",
url: baseUrl+"index.php/index/validateUserEmail",
data: "useremail="+$("#email").val(),
success: function(msg){
alert(msg);
if(msg == "1")
{
$("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/cross.png" />');
$("#emailValidate").val("1");
email_error.html("This email-Id already exists!");
return false;
}
else
{
$("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/tick.png" />');
$("#emailValidate").val("0");
email_error.html(" ");
alert("alok");
$("#signupForm").submit() // <--- HERE
return true;
}
}
});
}
else{
email_error.html(" ");
return true;
}
}
你现在也可以把它清理一下......
答案 2 :(得分：0)
您需要设置选项async：false
答案 3 :(得分：0)
我认为你必须等到响应完成。 readyState的== 4
$.ajax({
type: "POST",
url: baseUrl+"index.php/index/validateUserEmail",
data: "useremail="+$("#email").val(),
success: function(){
}).done(function (msg) {
alert(msg);
if(msg == "1")
{
$("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/cross.png" />');
$("#emailValidate").val("1");
email_error.html("This email-Id already exists!");
return false;
}
else
{
$("#tick_cross").fadeIn("slow").html('<img src="'+baseUrl+'images/tick.png" />');
$("#emailValidate").val("0");
email_error.html(" ");
alert("alok");
return true;
}
}
})
.fail(function() { alert("error";
return true;
); });