Como posso saber se o jQuery tem uma solicitação Ajax pendente?

Estou tendo alguns problemas com um controle jQuery que fizemos. Suponha que você tenha uma lista suspensa que permite inserir o ID do item que está procurando, e quando você pressiona ENTER ou perde o foco em uma caixa de texto, ele valida via jQuery se o ID que você inseriu está correto, mostrando um alerta se não 't.

O fato é que quando um usuário comum insere um valor inválido nele e perde o foco pressionando o botão enviar, o post do jQuery retorna após o envio do formulário.

Existe alguma maneira de verificar se há algum processamento de solicitação Async por jQuery para não permitir o envio do formulário?

Você pode usar ajaxStart e ajaxStop para controlar quando as solicitações estão ativas.

$.active retorna o número de solicitações ativas do Ajax.

Mais informações aqui

 $(function () {
        function checkPendingRequest() {
            if ($.active > 0) {
                window.setTimeout(checkPendingRequest, 1000);
                //Mostrar peticiones pendientes ejemplo: $("#control").val("Peticiones pendientes" + $.active);
            }
            else {

                alert("No hay peticiones pendientes");

            }
        };

        window.setTimeout(checkPendingRequest, 1000);
 });

A função $ .ajax () retorna um objeto XMLHttpRequest. Armazene isso em uma variável acessível a partir do evento "OnClick" do botão Enviar. Quando um clique de envio é processado, verifique se a variável XMLHttpRequest é:

1) nulo, o que significa que nenhuma solicitação foi enviada ainda

2) que o valor readyState é 4 (carregado). Isso significa que a solicitação foi enviada e retornada com sucesso.

Em qualquer um desses casos, retorne verdadeiro e permita que o envio continue. Caso contrário, retorne false para bloquear o envio e fornecer ao usuário alguma indicação de por que o envio não funcionou. :)

Temos que utilizar o método $ .ajax.abort () para abortar a solicitação se ela estiver ativa. Este objeto de promessa usa a propriedade readyState para verificar se a solicitação está ativa ou não.

HTML

<h3>Cancel Ajax Request on Demand</h3>
<div id="test"></div>
<input type="button" id="btnCancel" value="Click to Cancel the Ajax Request" />

Código JS

//Initial Message
var ajaxRequestVariable;
$("#test").html("Please wait while request is being processed..");

//Event handler for Cancel Button
$("#btnCancel").on("click", function(){
if (ajaxRequestVariable !== undefined)

if (ajaxRequestVariable.readyState > 0 && ajaxRequestVariable.readyState < 4)
{
  ajaxRequestVariable.abort();
  $("#test").html("Ajax Request Cancelled.");
}
});

//Ajax Process Starts
ajaxRequestVariable = $.ajax({
            method: "POST",
            url: '/echo/json/',
            contentType: "application/json",
            cache: false,
            dataType: "json",
            data: {
        json: JSON.encode({
         data:
             [
                            {"prop1":"prop1Value"},
                    {"prop1":"prop2Value"}
                  ]         
        }),
        delay: 11
    },

            success: function (response) {
            $("#test").show();
            $("#test").html("Request is completed");           
            },
            error: function (error) {

            },
            complete: function () {

            }
        });