使用 ajax 验证 jquery / 标准 javascript 提交表单
Posted
技术标签:
【中文标题】使用 ajax 验证 jquery / 标准 javascript 提交表单【英文标题】：submit form with ajax validation jquery / standard javascript 【发布时间】：2015-12-12 01:13:07 【问题描述】：首先我要道歉 - 我是一名 .NET 编码员，几乎没有（没有）前端经验。
当用户点击提交时，表单需要调用一个 REST 服务，如果服务返回 true，那么用户会收到一个警告，指出存在重复，并询问他们是否要继续。感谢任何帮助。
我将提交按钮 ONCLICK 连接到 Approve()
当 checkForDuplicateInvoice() 被调用时，它会在 ajax 调用有机会获得结果之前立即将控制权传递回调用函数。效果是 Validate() 函数完成时不考虑是否存在重复发票。
我需要帮助修改表单，以便当用户单击提交按钮时，表单在最终提交之前验证（包括对 db 的 ajax 调用）。
我根据 Jasen 的反馈修改了代码。
我在标题中包含https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js。
我现在得到的错误是“对象不支持属性或方法'按钮'”
我现在提交/验证的表单是：
$(document).ready(function ()
$("#process").button().click( function ()
if (ValidateFields()) // internal validation
var companyCode = document.getElementById("_1_1_21_1").value;
var invoiceNo = document.getElementById("_1_1_25_1").value;
var vendorNo = document.getElementById("_1_1_24_1").value;
if (vendorNo == "undefined" || invoiceNo == "undefined" || companyCode == "undefined")
return false;
$.ajax( // external validation
type: "GET",
contentType: "application/json;charset=utf-8",
//context: $form,
async: false,
dataType: "jsonp",
crossDomain: true,
cache: true,
url: "http://cdmstage.domain.com/services/rest/restservice.svc/CheckDuplicateInvoice?InvoiceNumber=" + invoiceNo + "&VendorNumber=" + vendorNo + "&CompanyCode=" + companyCode,
success: function (data)
var result = data;
var exists = result.CheckForInvoiceDuplicateResult.InvoiceExists;
var valid = false;
if (exists)
if (confirm('Duplicate Invoice Found! Click OK to override or Cancel to return to the form.'))
valid = true;
else
valid = true; // no duplicate found - form is valid
if (valid)
document.getElementById("_1_1_20_1").value = "Approve";
doFormSubmit(document.myForm);
,
error: function (xhr)
alert(xhr.responseText);
);
);
);
【问题讨论】：
但是你的问题是什么？ 您在这里期待什么？我不明白你的问题.. 当 Approve() 调用调用 CheckForInvoice() 的 Validate() 时，CheckForInvoice() 函数会在 ajax 调用返回之前返回控制权，因此 Validate 永远不会从 ajax 调用中获得响应。我不知道如何验证表单并让验证等待结果。 修改了原始帖子以包含一个问题，对不起！ 您提出两个请求是否有特定原因：AddInvoice + 提交？
【参考方案1】：
先复习How do I return the response from an asynchronous call? 了解为什么不能从 ajax 回调函数返回值。
接下来，取消提交按钮与表单的关联，以防止其执行默认提交。测试它看看它什么都不做。
<form>
...
<button type="button" id="process" />
</form>
然后将其连接起来以提出您的验证请求
$("#process").on("click", function()
if (valid())
$(this).prop("disabled", true); // disable the button to prevent extra user clicks
// make ajax server-side validation request
);
然后你就可以让你的 AJAX 请求真正异步了。
$.ajax(
async: true,
...,
success: function(result)
if (exists)
// return true; // returning a value is futile
// make ajax AddInvoice call
);
这个过程的伪代码
if (client-side is valid)
server-side validation:
on response: if (server-side is valid)
AddInvoice:
on response: if (successful)
form.submit()
-
在服务器端验证的回调中发出 AddInvoice 请求。
在 AddInvoice 的回调中，您拨打您的
form.submit()。
通过这种方式，您可以嵌套 ajax 调用并等待每个响应。如果有任何失败，请进行相应的 UI 提示并重新启用该按钮。否则，在两个 ajax 调用成功并以编程方式调用 submit() 之前，您不会自动提交表单。
【讨论】：
好的，我现在明白这个概念了——我会在早上的第一件事上试一试！感谢您的详细回复！ 我已根据您的反馈修改了问题。我现在得到对象不支持属性或方法“按钮”。我错过了包含吗？ 我不再有对象错误 - 现在表单根本没有提交。 $("#process").... 处的断点没有被击中，表单无处可去。再次感谢！ 好吧 - 想通了 - 最后一部分只是得到 $(document).ready 的东西，等等。非常感谢 Jasen 的指导！以上是关于使用 ajax 验证 jquery / 标准 javascript 提交表单的主要内容，如果未能解决你的问题，请参考以下文章