使用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()為止。