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

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

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

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

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

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

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

Спасибо

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

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

    ОтправитьHandler : вызывается, когда форма проверена успешно – прямо перед отправкой сервера
    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 () { $("
  • ").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 все изменилось.

    Как обычно, возьмите этот код и добавьте обширную проверку ошибок: DI использует аналогичный код для предотвращения двойных представлений в наших формах, и он отлично работает в 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; } } 
    Давайте будем гением компьютера.