Question

我将从道歉开始 - 我是一名具有很少（没有）前端经验的.NET编码器。

当用户单击“提交”时，表单需要调用REST服务，如果服务返回true，则会向用户显示存在重复的警告，并询问他们是否要继续。感谢任何帮助。

我将提交按钮ONCLICK连接到Approve（）

当调用checkForDuplicateInvoice（）时，它会在ajax调用有机会获得结果之前立即将控制权传递回调用函数。结果是Validate（）函数完成，而不考虑是否存在重复的发票。

我需要帮助修改表单，这样当用户点击提交按钮时，表单会在最终提交之前验证（包括对数据库的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()
                }
            }
        }
    }

}

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

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

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

1 个答案: