Как добавить функцию submitHandler при использовании jQuery Unobruusive Validation?

Ответ 1

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

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

Ответ 2

Я нашел этот вопрос, ища способ установить 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 script инициализирует плагин Validate и способ, которым плагин вызывает обработчик.

Ответ 3

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

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 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);

Небольшой шаг по коду часто помогает понять! Надеюсь, что это поможет

* Удостоверьтесь, что у вас нет разрешений в связках.

Ответ 4

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

//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?");
});

Ответ 5

Я основывал это на первоначальном ответе, который не работал у меня. Я предполагаю, что в 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;
    }
}