我有一个非常简单的JavaScript,用于表单验证,可以检查我的表单字段。该函数将建立一个errorList变量并返回false,如果该变量为空,则该函数将返回true并提交。
我在此验证功能中添加了新层。现在,我想调用一个外部函数,该函数仅发送带有所有表单验证的Ajax请求,然后通过电子邮件向我发送电子邮件,询问用户是否通过了表单验证。
当表单不通过验证时,例如当我返回false时,调用此外部函数很好。显然,表单没有提交,因此允许ajax完成。
我只是无法弄清楚如何触发外部函数,让它完成,然后返回true并让表单提交。它只是跳过了ajax请求。
有人可以帮忙逻辑吗?
验证功能:
if (errorList.length > 0) {
// Log the errors in quote.shared.js:
logValidationErrors("N/A - Pre Quote", $("#prequote-form"), "productname", errorList);
$("#error-list").html("");
$("#error-list").append(errorList);
$("#error-div").slideDown(500, function() {
$( '#error-div' ).ScrollTo(300);
});
return false;
} else {
// Log the valid passing through this function in quote.shared.js:
logValidationErrors("N/A - Pre Quote", $("#prequote-form"), "productname", "none");
return true;
}
Ajax函数:
// logValidationErrors
function logValidationErrors(xOrderNumber, xForm, xProduct, xErrors) {
/*
alert(xOrderNumber);
alert(xForm);
alert(xProduct);
alert(xErrors);
*/
$.ajax({
url: "log-clientside-events.php?" +
"type=javascript-errors&" +
"ordernumber=" + xOrderNumber + "&" +
"formvalues=" + encodeURIComponent(xForm.serialize()) + "&" +
"product=" + xProduct + "&" +
"errors=" + encodeURIComponent(xErrors),
context: document.body,
cache: false,
timeout: 10000,
success: function(sHTML){
},
error:function (xhr, ajaxOptions, thrownError){
//window.location.href = window.location.href;
}
});
}
Anup帮助解决方案。关键是创建一个“标志”变量,该变量在Ajax第一次运行时为false,然后在ajax完成时将其设置为true,然后再次提交表单,然后“ flag”检查第二次跳过Ajax阶段-并返回true。
if (errorList.length > 0) {
// Log the errors in quote.shared.js:
logValidationErrors("N/A - Customer Details", $("#customer-form"), "productname", errorList);
$("#error-list").html("");
$("#error-list").append(errorList);
$("#customer-login-success-message").slideUp(100);
$("#error-div").slideDown(500, function() {
$( '#error-div' ).ScrollTo(300);
});
} else {
if (validationSuccessfullyLoggged) {
return true;
} else {
// Log the valid passing through this function in quote.shared.js:
logValidationErrors("N/A - Customer Details", $("#customer-form"), "productname", "none");
}
}
return false;
处理ajax的函数:
// logValidationErrors
var validationSuccessfullyLoggged = false;
function logValidationErrors(xOrderNumber, xForm, xProduct, xErrors) {
/*
alert(xOrderNumber);
alert(xForm);
alert(xProduct);
alert(xErrors);
*/
if (xErrors == "none") {
xErrors = "<li>Form Validated Successfully</li>";
submitForm = true;
} else {
submitForm = false;
}
$.ajax({
url: "log-clientside-events.php?" +
"type=javascript-errors&" +
"ordernumber=" + xOrderNumber + "&" +
"formvalues=" + encodeURIComponent(xForm.serialize()) + "&" +
"product=" + xProduct + "&" +
"errors=" + encodeURIComponent(xErrors),
context: document.body,
cache: false,
timeout: 10000,
success: function(sHTML){
//alert(validationSuccessfullyLoggged);
if (submitForm) {
validationSuccessfullyLoggged = true;
xForm.submit();
}
},
error:function (xhr, ajaxOptions, thrownError){
//window.location.href = window.location.href;
}
});
}
问题的一般原因是,当您发出AJAX请求时,它是异步的(AJAX中的第一个“ a”)。因此,在调用logValidationErrors函数之后,将在ajax操作返回之前运行return true。
为了解决这个问题,我可以想到2种通用方法(尽管可能我还没有想到其他方法):
1)在jQuery的ajax方法中,您可以将async设置为false(因此不再是异步的)。有关详细信息,请参见其文档:http : //api.jquery.com/jQuery.ajax/
我个人不建议这样做,除非是在非常特殊的情况下(并且我认为您的示例对我而言不合格),因为您锁定了一段时间的浏览器,并且达到了异步请求的目的。
2)一种选择是,您始终会从主JavaScript代码中返回false。换句话说,在调用logValidationErrors函数之后,也返回false(或者在if / else块之后只有一个return false语句。然后,当ajax操作实际上完成时,您要在成功处理程序中触发成功方案(例如,提交表单),并在错误情况下(请参见jQuery ajax文档中的error选项),您将要调用错误情况。
如果没有看到更多代码,或者在调用您发布的特定if / else示例时,我无法更精确地判断,可能是存在更优雅的处理方式。而且,根据您要执行的操作,可能还要记住其他注意事项。例如,如果提交表单只是要调用相同的if / else块,则可能需要一个跟踪变量来指示您已经发出了初始ajax请求,因此这次您可以继续进行并在需要时提交。
希望能有所帮助。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句