jQuery验证submitHandler未使用手动添加的数据val属性触发[duplicate]

我是根据最初的答案得出这个结论的,但这对我来说并不适用。我猜jQuery中的情况已经发生了变化。

像往常一样,使用这段代码并添加大量的错误检查:我使用类似的代码来防止表单上的重复提交,它在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;
    }
}

我更喜欢注入事件处理程序,以便将其绑定到……:)

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

以下发现可能有助于理解两者之间的差异:

顺从者 :在表单验证成功时调用-就在服务器回发之前
无效处理程序 :如果验证失败且没有回发,则调用

@DGreen的解决方案似乎绝对是在表单验证失败并且需要显示弹出式验证摘要等操作时注入特殊处理的最佳方式( 无效处理程序 )

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

@如果要防止成功验证表单的回发,PeteHaus解决方案是最好的方法( 顺从者 )

$("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。验证不引人注目的 负责为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。验证不引人注目的 像这样的处理者——但我不会打扰自己

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

如果你想知道为什么会这样

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

这不管用

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

因为 submitHandler 被明确地称为“内部” jquery。验证 当进行验证时。因此,设置在什么位置并不重要。

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

但是 invalidHandler 一定会在 init() 像这样,如果你在自己的代码中设置它,那就太晚了

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

有时,代码中的一小步会让你了解很多!希望这有帮助

*确保未启用捆绑包中的缩小功能。

我在寻找一种方法来设定目标时发现了这个问题 invalidHandler ,而不是 submitHandler .有趣的是,你不能设置 无效处理程序 在使用不引人注目的验证时也是如此。

当检测到无效表单时,不会触发该函数:

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

这种方法有效:

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

这似乎是由于 jquery。验证不引人注目的js 脚本初始化 验证 插件,以及插件调用处理程序的方式。

不显眼的库将在所有表单上附加验证器,因此您必须以这种方式替换submitHandler:

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