使用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

首先回顾如何从异步调用返回响应？ 了解为什么您不能从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()为止。