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

时间:2019-01-22 20:18:50

标签: javascript html mysql

我有一个通过Javascript验证的html表单,但是由于连接到外部API,因此该表单会在API查询返回之前提交

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

我正在使用setTimeout等待两个if()块中的返回,并尝试在提交周围进行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();
        }

});

1 个答案:

答案 0 :(得分:1)

谢谢大家!我已将Submit函数带入setTimeout函数内,然后按照@Gendarme将整个块带入$ .get api调用内。我还在if集成== 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();
    }
}

});