使用 ajax 验证 jquery / 标准 javascript 提交表单

Question

首先我要道歉 - 我是一名 .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);
                    }
                });
            }
        });
    });

Answer 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()
                }
            }
        }
    }

}

1. 在服务器端验证的回调中发出 AddInvoice 请求。
2. 在 AddInvoice 的回调中，您拨打您的 form.submit()。

通过这种方式，您可以嵌套 ajax 调用并等待每个响应。如果有任何失败，请进行相应的 UI 提示并重新启用该按钮。否则，在两个 ajax 调用成功并以编程方式调用 submit() 之前，您不会自动提交表单。