Как заставить ненавязчивый удаленный валидатор jquery выполнять асинхронность?

Это немного взломано, но я бы посоветовал попробовать следующее.

Во-первых, скройте кнопку отправки с помощью display="none" и покажите свою собственную кнопку «Отправить», которая запускает ваш скрипт выше.

Во-вторых, на вашей странице добавьте переменную флага [var remotePending = false;] и переменную для вызова setInterval [var intervalPending;], а в сценарии установите для флага значение true, а затем вызовите следующую функцию, используя intervalPending = setInterval('remoteCheck()', 200);.

function remoteCheck() {
    if ($.validator.pendingRequest == 0) {
        // requests are done
        // clear interval
        clearInterval(intervalPending);
        // re-enable our "submit" button

        // "click" the hidden button
        $("#hiddenSubmit").click();
    }
    // we will try again after the interval passes
}

Это позволит вам дождаться завершения ожидающей удаленной проверки, а затем продолжить работу в обычном режиме. Я не проверял, поэтому вам, возможно, придется поиграть, чтобы заставить это работать так, как вы хотите.

Я немного опоздал с этим, но я наткнулся на этот вопрос, пытаясь решить аналогичную проблему. Я тоже не хотел использовать Interval, поэтому я придумал другое решение и подумал, что, возможно, стоит подробно описать его здесь для других.

В конце концов я решил переопределить методы startRequest и stopRequest валидатора jQuery, чтобы добавить свою собственную логику. После выполнения собственной логики я просто вызываю старые методы валидатора.

// Extend jQuery validator to show loading gif when making remote requests
var oldStartRequest = $.validator.prototype.startRequest;
$.validator.prototype.startRequest = function (element) {
    var container = $('form').find("[data-valmsg-for='" + element.name + "']");
    container.addClass('loading');       

    oldStartRequest.apply(this, arguments);
};

var oldStopRequest = $.validator.prototype.stopRequest;
$.validator.prototype.stopRequest = function (element) {
    var container = $('form').find("[data-valmsg-for='" + element.name + "']");
    container.removeClass('loading');

    oldStopRequest.apply(this, arguments);
};

Все, что я хотел сделать для своих целей, это просто добавить класс css «загрузка» в соседнее поле сообщения проверки, чтобы показать загрузку gif, но вы можете легко расширить это, чтобы включить/отключить кнопку и т. д.

Я обнаружил, что ломаю голову над этим прошлой ночью, и, испробовав различные подходы, я пришел к эволюции советников. Поскольку советники не работали прямо из коробки, я решил поделиться ими, чтобы у других не было такой же головной боли. Это не такое «чистое» решение, как хотелось бы (я действительно ненавижу использовать интервалы). Но вроде хватает.

var iIntervalId = null;

//
// DECLARE FUNCTION EXPRESSIONS
//

//==============================================================================
// function that triggers update when remote validation completes successfully
//==============================================================================
var fnPendingValidationComplete = function () {

  var validator = $("#frmProductType").data("validator");
  if (validator.pendingRequest === 0) {

    clearInterval(iIntervalId);

    //Force validation to present to user (this will not retrigger remote validation)
    if ($("#frmProductType").valid()) {

      alert("valid - you can submit now if you like");

    }
    //else { alert("invalid"); }
  }
  //else { alert("NOT YET"); }
},

//==============================================================================
// Trigger validation
//==============================================================================
fnTriggerValidation = function (evt) {

  //Remove any cached values to ensure that remote validation is retriggered
  $("#txtProductType").removeData("previousValue");

  //Trigger validation
  $("#frmProductType").valid();

  //Setup interval which will evaluate validation (this approach because of remote validation)
  iIntervalId = setInterval(fnPendingValidationComplete, 50);
};

fnTriggerValidation();

В итоге я решил это, но кнопка отключения/ожидания показа изображения происходит только при наличии действительной отправленной формы. Это нормально, так как несколько неверных форм являются идемпотентными, пользователь может щелкать столько, сколько захочет. (Кроме того, метод действия удаленной проверки кэшируется для значений его параметров.)

$(function () {
    $('form').bind('invalid-form.validate', function () {
        $('form').each(function () {
            $(this).find(
                '[data-app-form-submitting-icon="true"]').hide();
            var button = $(this).find(
                'input[type="submit"][data-app-form-submit-button="true"]');
            setTimeout(function () {
                button.removeAttr('disabled');
            }, 1);
        });
    });
    $('form').live('submit', function (e) {
        $(this).find('[data-app-form-submitting-icon="true"]').show();
        var button = $(this).find(
            'input[type="submit"][data-app-form-submit-button="true"]');
        setTimeout(function () {
            button.attr('disabled', 'disabled');
        }, 0);
    });
});

Это тоже немного хакерски, но когда я не использовал setTimeout, действие отправки никогда не запускало недопустимый обработчик.

Я прошел все подходы, все было хорошо, но мне ничего не помогло. Затем я проверяю версию System.Web.Mvc проекта модели (класса или DTO) и проекта View, там была разница в версии. Я обновляю оба до одной и той же версии, и это сработало для меня.

Я проверяю, что в html-генерации отсутствовали data-val-remote-additionalfields=.Email, например, я проверял их.