javascript - 如何在 json 响应返回之前停止 Javascript 表单验证提交？

Question

我有一个由 Javascript 验证的 html 表单，但由于连接到外部 API，表单会在 API 查询返回之前提交

所有警报都正确触发，但是最后一行代码 - if (rtn) { $('#saleForm')[0].submit(); }- 在 api 调用数据返回之前解析，因此一旦我接受警报，表单总是会提交(因为 rtn 始终为 true)。

我使用 setTimeout 等待两个 if() block 中的返回，并尝试在提交周围使用 do/whilst 循环，但没有成功。

有没有一种方法可以用来强制提交在 if(rtn) 之前等待，直到检查完所有先前的条件？

    $('#saleForm').off('submit').on('submit', function(e) {
    e.stopPropagation();
    e.preventDefault();

    var rtn = true;

    if (window.hasIntegration == 'no' && $('#eventDate').val() == '') {
          alert('Please choose the event date and time.');
          $('#eventDate').focus();
          return false;
        }

    $('.itemValue').each(function() {
        if ($(this).val() == '') {
            alert('Please ensure all values are entered.');
            $('#ticket-rows').focus();
            rtn = false;
        }
    });

    if (!$('#terms').is(':checked')) {
        alert('Please accept the terms and conditions.');
        return false;
    }

// now use  integration to validate user supplied details

    if (window.integrationId == 2) {
        window.foundApiSellerDetails = [];
        window.sellerEmailMatch = [];
        var apiShowSelected = document.getElementById("showDateTime");
        var apiShowId = apiShowSelected.value;
        var orderRefField = document.getElementById('order_reference');
        var orderRef = orderRefField.value;

        $.get('/' + id + '/api-seller-details/' + apiShowId + '/' + orderRef, function(data) {
            if (data.length > 0) {
                window.foundApiSellerDetails = 'yes';

                $.each( data.result, function( key, value ) {
                    var apiOrderId = value.order.id;
                    var apiBuyerEmail = value.buyer.email;
                    var apiOrderToken = value.token;

                    $.get('/get-seller-email', function(data) {
                        if (apiBuyerEmail === data) {
                            window.sellerEmailMatch = 'yes';
                        } else {
                            window.sellerEmailMatch = 'no';
                        }

                    });
                });
            } else {
                window.foundApiSellerDetails = 'no';
            }

        });

        setTimeout(function(){
            if (window.foundApiSellerDetails == 'no') {
                alert('Sorry, we can\'t find any details with Order Reference ' + orderRef + '. Please check your order number  or contact);
                $('#order_reference').focus();
                return false;
            }

            if (window.foundApiSellerDetails == 'yes' && window.sellerEmailMatch == 'no') {
                alert('Sorry, your email doesn\'t match the buyers email for this order');
                return false;
            }

        }, 1000);

    }
        if (rtn) {
            $('#saleForm')[0].submit();
        }

});

Answer 1

谢谢大家!我已将提交函数引入 setTimeout 函数中，然后按照 @Gendarme 将整个 block 引入 $.get api 调用中。我还在 if Integration == 2 之后添加了 else ，以便在不存在集成的情况下使提交工作。下面的新代码。现在可以享受一下了。

// now use  integration to validate user supplied details

if (window.integrationId == 2) {
    window.foundApiSellerDetails = [];
    window.sellerEmailMatch = [];
    var apiShowSelected = document.getElementById("showDateTime");
    var apiShowId = apiShowSelected.value;
    var orderRefField = document.getElementById('order_reference');
    var orderRef = orderRefField.value;

    $.get('/' + id + '/api-seller-details/' + apiShowId + '/' + orderRef, function(data) {
        if (data.length > 0) {
            window.foundApiSellerDetails = 'yes';

            $.each( data.result, function( key, value ) {
                var apiOrderId = value.order.id;
                var apiBuyerEmail = value.buyer.email;
                var apiOrderToken = value.token;

                $.get('/get-seller-email', function(data) {
                    if (apiBuyerEmail === data) {
                        window.sellerEmailMatch = 'yes';
                    } else {
                        window.sellerEmailMatch = 'no';
                    }

                });
            });
        } else {
            window.foundApiSellerDetails = 'no';
        }

    setTimeout(function(){
        if (window.foundApiSellerDetails == 'no') {
            alert('Sorry, we can\'t find any details with Order Reference ' + orderRef + '. Please check your order number  or contact);
            $('#order_reference').focus();
            return false;
        }

        if (window.foundApiSellerDetails == 'yes' && window.sellerEmailMatch == 'no') {
            alert('Sorry, your email doesn\'t match the buyers email for this order');
            return false;
        }

    if (rtn) {
        $('#saleForm')[0].submit();
    }

    }, 1000);

});

} else {
    if (rtn) {
        $('#saleForm')[0].submit();
    }
}

});