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

Я проверяю форму, используя новые ненавязчивые функции проверки в ASP.NET MVC 3.

таким образом, нет кода, который я написал для настройки jQuery validate, чтобы начать проверку моей формы. Все это делается путем загрузки jQuery.утверждать.ненавязчивый.библиотека js.

к сожалению, мне нужно ударить в " вы уверены?'окно сообщения, когда форма действительна, но перед отправкой. С помощью jQuery validate вы добавите опцию handleSubmit при инициализации, например Итак:

$("#my_form").validate({
  rules: {
    field1: "required",
    field1: {email: true },
    field2: "required"
  },
  submitHandler: function(form) {
     if(confirm('Are you sure?')) {
       form.submit();
     }
  }
});

но вам не нужно инициализировать при использовании ненавязчивый библиотека.

любые идеи, где/как я могу добавить обработчик отправки в этом случае?

Thx

5 ответов


ненавязчивая библиотека прикрепит валидатор ко всем формам, поэтому вы должны заменить 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.утверждать.ненавязчивый.js скрипт инициализирует проверка плагин, и способ, которым плагин вызывает обработчик.


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

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

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

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

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

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

однако я был немного обеспокоен тем, какое поведение я переопределял (или не переопределял) путем привязки к .validate такой метод - и почему я должен был делать каждый путь по-разному. Поэтому я проверил источник. Настоятельно рекомендую любой, кто хочет понять эту процедуру больше, делает это тоже-поместите некоторые операторы "alert" или "debugger", и это довольно легко следовать*

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

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 это explicily называется внутри jquery.validate при выполнении проверки. Поэтому не имеет значения, в какой точке он установлен.

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

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

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.икс.)

$("#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;
    }
}