Как добавить функцию «submitHandler» при использовании ненавязчивой проверки jQuery?

Ненавязчивая библиотека прикрепит валидатор ко всем формам, поэтому вам нужно заменить submitHandler следующим образом:

$("form").data("validator").settings.submitHandler = function (form) { alert('submit'); form.submit(); };

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

Функция не запускается при обнаружении недопустимой формы:

$("form").data("validator").settings.invalidHandler = function (form, validator) {
    alert('invalid!');
};

Этот подход работает:

$("form").bind("invalid-form.validate", function () {
  alert('invalid!');
});

Похоже, это связано со способом, которым скрипт jquery.validate.unobtrusive.js инициализирует подключаемый модуль Validate, и способом, которым подключаемый модуль вызывает обработчик.

Следующие выводы могут представлять интерес для понимания разницы между:

submitHandler : вызывается, когда форма успешно проверена - прямо перед обратной передачей сервера
invalidHandler : вызывается, если проверка не удалась и нет обратной отправки

Решение @DGreen определенно кажется лучшим способом внедрить специальную обработку, если проверка формы не удалась, и вам нужно сделать что-то, например, отобразить всплывающую сводку проверки (invalidHandler)

$("form").bind("invalid-form.validate", function () {
  alert('invalid!');
});

Решение @PeteHaus — лучший способ сделать что-то, если вы хотите предотвратить обратную передачу успешно проверенной формы (submitHandler)

$("form").data("validator").settings.submitHandler = function (form) { 
                                                     alert('submit'); form.submit(); };

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

В любом случае получается, что когда обработчик jquery.validate.unobtrusive инициализирует плагин jquery.validate, он делает это в методе parseElement(), извлекая параметры, созданные методом validationInfo().

ValidationInfo() возвращает такие параметры:

 options: {  // options structure passed to jQuery Validate's validate() method
             errorClass: "input-validation-error",
             errorElement: "span",
             errorPlacement: $.proxy(onError, form),
             invalidHandler: $.proxy(onErrors, form),
             messages: {},
             rules: {},
             success: $.proxy(onSuccess, form)
           },

Метод onErrors() в jquery.validate.unobtrusive отвечает за динамическое создание сводной панели проверки для MVC. Если вы не создаете сводную панель проверки (с @Html.ValidationSummary(), которая случайно должна содержаться в теле FORM), то этот метод полностью инертен и ничего не делает, так что вам не о чем беспокоиться.

function onErrors(event, validator) {  // 'this' is the form elementz
    var container = $(this).find("[data-valmsg-summary=true]"),
        list = container.find("ul");

    if (list && list.length && validator.errorList.length) {
        list.empty();
        container.addClass("validation-summary-errors").removeClass("validation-summary-valid");

        $.each(validator.errorList, function () {
            $("<li />").html(this.message).appendTo(list);
        });
    }
}

Если вы действительно хотите, вы можете отвязать обработчик jquery.validate.unobtrusive вот так, но я бы не стал себя беспокоить

 $("form").unbind("invalid-form.validate"); // unbind default MS handler

Если вам интересно, почему это работает

 $("form").data("validator").settings.submitHandler = ...

и это не работает

 $("form").data("validator").settings.invalidHandler = ...

это потому, что submitHandler явно вызывается внутри jquery.validate при выполнении проверки. Поэтому не имеет значения, в какой точке он установлен.

 validator.settings.submitHandler.call( validator, validator.currentForm );

но invalidHandler привязан к событию во время init() вот так, поэтому, если вы установите его в своем собственном коде, будет слишком поздно

if (this.settings.invalidHandler)
    $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);

Небольшое пошаговое выполнение кода иногда приводит к большому пониманию! Надеюсь это поможет

* Убедитесь, что у вас не включена минимизация пакетов.

Я предпочитаю вводить обработчик событий, чтобы его можно было привязать к... :)

//somewhere in your global scripts
$("form").data("validator").settings.submitHandler = function (form) {
    var ret = $(form).trigger('before-submit');
    if (ret !== false) form.submit();
};

Таким образом, я могу привязаться к нему в любом месте...

//in your view script(s)
$("form").bind("before-submit", function() {
    return confirm("Are you sure?");
});

Я основывал это на исходном ответе, который у меня не сработал. Я думаю, что-то изменилось в jQuery.

Как обычно, возьмите этот код и добавьте обстоятельную проверку ошибок: D Я использую аналогичный код для предотвращения двойной отправки в наших формах, и он отлично работает в IE8+ (начиная с mvc4 и jquery 1.8.x).

$("#myFormId").confirmAfterValidation();

// placed outside of a $(function(){ scope
jQuery.fn.confirmAfterValidation = function () {
    // do error checking first.  should be null if no handler already
    $(this).data('validator').settings.submitHandler = confirmValidForm;
};

function confirmValidForm(form) {
    var validator = $(this);
    var f = $(form);
    if (confirm("really really submit?")) {
        // unbind so our handler doesn't get called again, and submit
        f.unbind('submit').submit();
    }
        // return value is _ignored_ by jquery.validate, so we have to set
        // the flag on the validator itself, but it should cancel the submit
        // anyway if we have a submitHandler
        validator.cancelSubmit = true;
    }
}