Как добавить функцию submitHandler при использовании jQuery Unobtrusive Validation?
Я проверяю форму, используя новые функции ненавязчивой проверки в ASP.NET MVC 3.
Таким образом, нет кода, который я написал для настройки проверки jQuery, чтобы начать проверку моей формы. Все это делается путем загрузки библиотеки jQuery.validate.unobtrusive.js.
К сожалению, мне нужно бить в «ты уверен?» когда форма действительна, но перед отправкой. С помощью проверки jQuery вы добавите параметр handleSubmit при инициализации следующим образом:
- Проверка MVC3 - требуется от группы
- Вручную установите ненавязчивую ошибку проверки в текстовом поле
- jquery.validate.unobtrusive не работает с динамическими инъецированными элементами
- присоединение проверки jquery к элементу замены
$("#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; } }